<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>龙陌的博客</title>
    <meta name="description" content="基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/long-press/assets/style.BL65bImA.css" as="style">
    
    <script type="module" src="/long-press/assets/app.CKtEL6mi.js"></script>
    <link rel="preload" href="/long-press/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/long-press/assets/chunks/framework.Cp_of1Ge.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/theme.hH2tFlJ7.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/PageInfo.vue_vue_type_script_setup_true_lang.9LRWY4ho.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/dayjs.min.BrPrGVY0.js">
    <link rel="modulepreload" href="/long-press/assets/css3_现代web布局_28.md.jsAdcmE1.lean.js">
    <link rel="icon" type="image/svg+xml" href="logo.ico">
    <meta name="author" content="龙陌">
    <meta name="referrer" content="no-referrer">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-4c760b95><!--[--><!--]--><!--[--><span tabindex="-1" data-v-16c53dd7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-16c53dd7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-4c760b95 data-v-0a463f3f><div class="VPNavBar has-sidebar top" data-v-0a463f3f data-v-460dba10><div class="wrapper" data-v-460dba10><div class="container" data-v-460dba10><div class="title" data-v-460dba10><div class="VPNavBarTitle has-sidebar" data-v-460dba10 data-v-ef777607><a class="title" href="/long-press/" data-v-ef777607><!--[--><!--]--><!--[--><img class="VPImage logo" src="/long-press/logo.ico" alt data-v-9cb742f0><!--]--><span data-v-ef777607>龙陌的博客</span><!--[--><!--]--></a></div></div><div class="content" data-v-460dba10><div class="content-body" data-v-460dba10><!--[--><!--]--><div class="VPNavBarSearch search" data-v-460dba10><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-460dba10 data-v-b298d4fd><span id="main-nav-aria-label" class="visually-hidden" data-v-b298d4fd>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💻 首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/guide/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💡 指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/tools/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 编程工具</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/utils/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 常用工具类</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/standard/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>📋 前端规范</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/react/React实战,设计模式与最佳实践/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ React</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/typescript/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ TypeScript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/css3/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Css3</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/electron/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Electron</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/linux/linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Linux</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-460dba10 data-v-815abbf3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-815abbf3 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-460dba10 data-v-a0947e71 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-460dba10 data-v-b81df352 data-v-603fa601><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-603fa601><span class="vpi-more-horizontal icon" data-v-603fa601></span></button><div class="menu" data-v-603fa601><div class="VPMenu" data-v-603fa601 data-v-61aada2f><!----><!--[--><!--[--><!----><div class="group" data-v-b81df352><div class="item appearance" data-v-b81df352><p class="label" data-v-b81df352>外观</p><div class="appearance-action" data-v-b81df352><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-b81df352 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div></div></div><div class="group" data-v-b81df352><div class="item social-links" data-v-b81df352><div class="VPSocialLinks social-links-list" data-v-b81df352 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-460dba10 data-v-156ee799><span class="container" data-v-156ee799><span class="top" data-v-156ee799></span><span class="middle" data-v-156ee799></span><span class="bottom" data-v-156ee799></span></span></button></div></div></div></div><div class="divider" data-v-460dba10><div class="divider-line" data-v-460dba10></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-4c760b95 data-v-bc5dff2d><div class="container" data-v-bc5dff2d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-bc5dff2d><span class="vpi-align-left menu-icon" data-v-bc5dff2d></span><span class="menu-text" data-v-bc5dff2d>归档</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-bc5dff2d data-v-fe28bfa1><button data-v-fe28bfa1>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-4c760b95 data-v-e1756f1c><div class="curtain" data-v-e1756f1c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e1756f1c><span class="visually-hidden" id="sidebar-aria-label" data-v-e1756f1c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>现代web布局</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/01" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Web 布局技术演进：了解 Web 布局发展史</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/02" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>现代 Web 布局技术术语</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/03" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局基础使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/04" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的对齐方式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/05" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex 属性的基础运用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/06" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/07" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/08" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/09" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>使用 Flexbox 构建经典布局：10 种经典 Web 布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/10" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>10</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>postcss</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/postcss/postcss-prefix-selector%E5%A2%9E%E5%8A%A0%E7%BB%9F%E4%B8%80%E4%BD%9C%E7%94%A8%E5%9F%9F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>postcss-prefix-selector增加统一作用域</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-4c760b95 data-v-308553a0><div class="VPDoc has-sidebar has-aside" data-v-308553a0 data-v-e512d8d8><!--[--><!--]--><div class="container" data-v-e512d8d8><div class="aside" data-v-e512d8d8><div class="aside-curtain" data-v-e512d8d8></div><div class="aside-container" data-v-e512d8d8><div class="aside-content" data-v-e512d8d8><div class="VPDocAside" data-v-e512d8d8 data-v-bca3b04c><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-bca3b04c data-v-ff0b6666><div class="content" data-v-ff0b6666><div class="outline-marker" data-v-ff0b6666></div><div class="outline-title" role="heading" aria-level="2" data-v-ff0b6666>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0b6666><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0b6666> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ff0b6666 data-v-69d389fc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-bca3b04c></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e512d8d8><div class="content-container" data-v-e512d8d8><!--[--><!--]--><main class="main" data-v-e512d8d8><div style="position:relative;" class="vp-doc _long-press_css3_%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80_28" data-v-e512d8d8><div><p>CSS 的媒体查询引发了一场响应式 Web 设计的革命，为开发者提供了一种方法来查询用户代理或设备环境的各个方面，比如视窗的大小或用户偏好来改变 Web 页面的风格。直到现在，媒体查询还做不到根据一个最近的容器的大小来改变样式风格。也正因此，大家一直期待的容器查询来了。</p><p><strong>很难想象，从基于页面的响应式设计（媒体查询）到基于容器的响应式设计（容器查询）的转变，对设计生态系统的发展会起到什么作用</strong> 。</p><p>为了回答这个问题，接下来我们分几个方面来介绍，希望能给大家带来一定的思考，从而得到自己想要的答案。</p><h2 id="容器查询的发展历程" tabindex="-1">容器查询的发展历程 <a class="header-anchor" href="#容器查询的发展历程" aria-label="Permalink to &quot;容器查询的发展历程&quot;">​</a></h2><p>一直以来，CSS 容器查询都是大家期待的一个特性，在这几年的 CSS 发展报告中，它一直位居第一：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18f52d4afa58406b8dcb466de9ca9605~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>通过前面课程的学习，我们知道了。在 CSS 中，Web 开发者可以根据 CSS 媒体查询特性（通常是视窗宽度、媒体设备特性等）来为 Web 页面定制不同的表现形式，比如可以根据用户浏览内容的设备特性来呈现不同的布局、字体大小和图片等。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a049e0660b06465a8d50e8badaa5d0b2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>但对于 Web 设计师或 Web 开发者来说，在现代 Web 设计或布局中仍然缺少一特性，页面的组件设计不能够响应其容器的宽度（或其他特性）。也就是说，如果 Web 开发者能够根据容器宽度来改变 UI 样式，那就更好了。容器查询将在很大程度上帮助 Web 开发者更好地完成他们的工作，在为 Web 开发基于组件代码时，容器查询特性的缺失是一个巨大的限制。</p><p>正因此，有关于容器查询的特性在社区中的探讨就没有停止过。</p><p>早在 2019 年底，<a href="https://twitter.com/zachleat" target="_blank" rel="noreferrer">@Zach Leatherman</a> 在寻找<a href="https://www.zachleat.com/web/origin-container-queries/" target="_blank" rel="noreferrer">容器查询起源</a>时，找到的最早有关于容器查询的解决方案是 <a href="https://twitter.com/andyhume" target="_blank" rel="noreferrer">@Andy Hume</a> 的基于 <a href="https://github.com/ahume/selector-queries" target="_blank" rel="noreferrer">JavaScript 的选择器查询和响应式容器的解决方案</a>。</p><p>2015 年， <a href="https://twitter.com/wilto" target="_blank" rel="noreferrer">@Mat ‘Wilto’ Marquis</a> 在响应式图片社区小组引入了 <code>&lt;picture&gt;</code> 元素，将响应式图片带到了响应式 Web 设计的世界，他在《<a href="https://alistapart.com/article/container-queries-once-more-unto-the-breach/" target="_blank" rel="noreferrer">Container Queries: Once More Unto the Breach</a>》一文中概述了容器查询的挑战和使用案例，演示了容器查询的特性。</p><p>然后，在 2017年，<a href="https://twitter.com/beep" target="_blank" rel="noreferrer">@Ethan Marcotte</a> 写了一篇关于<a href="https://ethanmarcotte.com/wrote/on-container-queries/" target="_blank" rel="noreferrer">容器查询相关的文章</a>，并提出了这样的看法： <strong>在他最初关注的响应式 Web 设计的文章之后的几年里，Web 设计师和开发人员的工作越来越集中在组件上，而不是整个页面，这使得媒体查询不那么理想</strong> 。</p><p>从那时起，虽然有很多人开始主张使用容器查询，但容器查询向前推进的速度还是不够理想。<a href="https://twitter.com/davidbaron" target="_blank" rel="noreferrer">@L. David Baron</a> 在《<a href="https://github.com/dbaron/container-queries-implementability" target="_blank" rel="noreferrer">Thoughts on an implementable path forward for Container Queries</a>》中简明扼要地解释了容器查询向前推进慢的问题出在哪。</p><p><strong>容器查询要求样式取决于组件的大小，但考虑到 CSS 的工作原理，组件中的样式会影响其大小。任意打破这个循环，既会产生奇怪的结果，又会干扰浏览器的工作，还会增加浏览器优化的成本</strong> 。</p><p>除了 @David Baron 之外，2018 年 6 月，<a href="https://twitter.com/gregwhitworth" target="_blank" rel="noreferrer">@Greg Whitworth</a> 在荷兰阿姆斯特丹举办的 <a href="https://noti.st/events/elQrNX/css-day-ux-special" target="_blank" rel="noreferrer">CSS Day + UX Special</a> 活动上的主题分享《<a href="https://noti.st/gregwhitworth/UDul7E/over-the-moon-for-container-queries" target="_blank" rel="noreferrer">Over the moon for container queries</a>》中也解释了容器查询在 Web 平台上推进慢的相关原因。</p><p>更重要的是，@Greg Whitworth 还提供了使用新的 JavaScript API 和 CSS 的新技术来实现容器查询的特性。<a href="https://github.com/dbaron/container-queries-implementability" target="_blank" rel="noreferrer">@David Barrrron 也提出了一个可以避免这种困境的策略</a>，更重要的是 <a href="https://twitter.com/TerribleMia" target="_blank" rel="noreferrer">@Miriam Suzanne</a> 在 @David Baron 的策略基础上提出了 <code>@container 方法</code>。</p><blockquote><p><code>@container</code> 方法通过对被查询的元素应用大小和布局的限制来实现。任何具有尺寸和布局限制的元素都可以通过一个新的 <code>@container</code> 规则进行查询，其语法与现有的媒体查询类似。</p></blockquote><p>这个提议已经被 <a href="https://drafts.csswg.org/css-contain-3/" target="_blank" rel="noreferrer">W3C 的 CSS 工作组</a>采纳，并已经添加到 <strong><a href="https://www.w3.org/TR/css-contain-3" target="_blank" rel="noreferrer">CSS Containment Module Level 3</a></strong> 模块中。有关于该功能的相关问题和各网络平台推进进度，<a href="https://github.com/w3c/csswg-drafts/projects/18" target="_blank" rel="noreferrer">可以点击这里查阅</a>。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15fb2c4de8004eada8d8283406fdcc02~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>其实，自从我们在 2021 年 4 月第一次看到容器查询原型以来，它的语法已经更改了几次。庆幸的是，现在容器查询的规范也稳定了，浏览器也准备发布了！现在使用，你也不必担心其语法规则的变化了。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d00258457baf49eba863a203afc1ae64~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>当然，如果你在互联网上阅读 CSS 容器查询相关的教程，看到文章中的示例没有任何效果，很有可能示例使用的是老的语法规则。</p><p>直到现在为止（写这篇课程的时间），<a href="https://caniuse.com/css-container-queries" target="_blank" rel="noreferrer">CSS 容器查询在现代主流浏览器上都可以查看到相应的效果</a>：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4188c738c2445969576ad058fac47f9~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>但你要运用于实际生产中，还是需要慎重，或者可以尝试依赖 <a href="https://github.com/GoogleChromeLabs/container-query-polyfill" target="_blank" rel="noreferrer">CSS 容器查询相关的 Polyfill</a> 来保证其在生产中的正常运行。</p><h2 id="什么是容器查询" tabindex="-1">什么是容器查询？ <a class="header-anchor" href="#什么是容器查询" aria-label="Permalink to &quot;什么是容器查询？&quot;">​</a></h2><p>CSS 容器查询最大的特点是： <strong>容器查询允许开发者定义任何一个元素为包含上下文，查询容器的后代元素可以根据查询容器的大小或计算样式的变化来改变风格</strong> ！</p><p>换句话说，一个查询容器是通过使用容器类型属性（<code>container-type</code> 或 <code>container</code>）来指定其查询类型。同时，查询容器的后代元素的样式规则可以通过使用 <code>@container</code> 条件组规则进行独立设置。简单地说，<strong>查询容器（也被称为 CSS 包容）提供了一种方法来隔离页面的各个部分，并向浏览器声明这些部分在样式和布局方面与页面的其他部分是独立的</strong> 。</p><p>容器查询为响应式 Web 设计提供了一种更加动态的方法。这意味着，如果你卡片组件同时放在侧边栏（<code>aside</code>）和页面主内容栏中（<code>main</code>），则卡片组件本身可以根据容器（<code>aside</code> 和 <code>main</code>）而不是浏览器视窗进行响应式的信息展示（卡片组件 UI 不同）。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7515be040494766bd8fa2fc12c9f295~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>简化一下，以卡片 <code>.card</code> 组件为例。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9e5f5a03e3944c58894355da448c3a3~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>同一个卡片组件 <code>Card</code> ，它有三种不同的 UI 状态，分别是 <code>S</code> 、<code>M</code> 和 <code>L</code> 。</p><p>我们来看如何使用 CSS 容器查询构建这个卡片组件。首先，把卡片组件放到一个容器中，比如 <code>.card__container</code> ：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;div class=&quot;card__container&quot;&gt;</span></span>
<span class="line"><span>    &lt;!-- Card 组件需要的 HTML 结构 --&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;card&quot;&gt;</span></span>
<span class="line"><span>        &lt;figure&gt;</span></span>
<span class="line"><span>            &lt;img src=&quot;thumbnail.jpg&quot; alt=&quot;thumbnail&quot; /&gt;</span></span>
<span class="line"><span>        &lt;/figure&gt;</span></span>
<span class="line"><span>        &lt;ul class=&quot;badges&quot;&gt;</span></span>
<span class="line"><span>            &lt;li class=&quot;badge&quot;&gt;gluten free&lt;/li&gt;</span></span>
<span class="line"><span>            &lt;li class=&quot;badge&quot;&gt;main dish&lt;/li&gt;</span></span>
<span class="line"><span>        &lt;/ul&gt;</span></span>
<span class="line"><span>        &lt;h3 class=&quot;title&quot;&gt;Card Title&lt;/h3&gt;</span></span>
<span class="line"><span>        &lt;div class=&quot;votes&quot;&gt;</span></span>
<span class="line"><span>            &lt;svg&gt;&lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;svg&gt;&lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;svg&gt;&lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;svg&gt;&lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;svg&gt;&lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;span&gt;(12 votes)&lt;/span&gt;</span></span>
<span class="line"><span>        &lt;/div&gt;</span></span>
<span class="line"><span>        &lt;p class=&quot;description&quot;&gt;Card Description&lt;/p&gt;</span></span>
<span class="line"><span>        &lt;button&gt;</span></span>
<span class="line"><span>            &lt;svg&gt;&lt;/svg&gt; Save</span></span>
<span class="line"><span>        &lt;/button&gt;</span></span>
<span class="line"><span>        &lt;dl class=&quot;lists&quot;&gt;</span></span>
<span class="line"><span>            &lt;dt&gt;Preparation Time: &lt;/dt&gt;</span></span>
<span class="line"><span>            &lt;dd&gt;3 hours&lt;/dd&gt;</span></span>
<span class="line"><span>            &lt;dt&gt;Cooking time:&lt;/dt&gt;</span></span>
<span class="line"><span>            &lt;dd&gt;25 min&lt;/dd&gt;</span></span>
<span class="line"><span>            &lt;dt&gt;Serving:&lt;/dt&gt;</span></span>
<span class="line"><span>            &lt;dd&gt;4-6 persons&lt;/dd&gt;</span></span>
<span class="line"><span>            &lt;dt&gt;Cost:&lt;/dt&gt;</span></span>
<span class="line"><span>            &lt;dd&gt;$3/person&lt;/dd&gt;</span></span>
<span class="line"><span>        &lt;/dl&gt;</span></span>
<span class="line"><span>    &lt;/div&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><p>也就是说，当卡片组件（<code>.card</code>）被放在一个容器（<code>.card__container</code>）中时，代表着它被包含在该容器中，比如上面代码中的 <code>.card__container</code>。这也意味着，我们可以使用 CSS 的 <code>container</code> 来查询 <code>.card__container</code> 的宽度，并在 <code>@container</code> 对 <code>.card</code> 设置不同的样式规则，从而达到设计师真正的意图，比如，容器宽度（<code>.card__container</code>）分别在默认、 <code>&gt;650px</code>和<code>&gt;820px</code> 时，为 <code>.card</code> 设置不同样式：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8520402c0a9d45749c76a20fc8ce791e~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>代码可能像下面这样：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container {</span></span>
<span class="line"><span>    min-width: 300px;</span></span>
<span class="line"><span>    width: 360px;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>    resize: horizontal;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 0.5rem;</span></span>
<span class="line"><span>    grid-template-columns: auto;</span></span>
<span class="line"><span>    grid-template-rows: min-content auto auto auto minmax(0, 1fr);</span></span>
<span class="line"><span>    grid-template-areas:</span></span>
<span class="line"><span>        &quot;thumbnail&quot;</span></span>
<span class="line"><span>        &quot;badges&quot;</span></span>
<span class="line"><span>        &quot;title&quot;</span></span>
<span class="line"><span>        &quot;votes&quot;</span></span>
<span class="line"><span>        &quot;description&quot;;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card figure {</span></span>
<span class="line"><span>    border-radius: 8px 8px 0 0;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>    aspect-ratio: 4 / 3;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card figure {</span></span>
<span class="line"><span>    grid-area: thumbnail;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .badges {</span></span>
<span class="line"><span>    grid-area: badges;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .title {</span></span>
<span class="line"><span>    grid-area: title;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .votes {</span></span>
<span class="line"><span>    grid-area: votes;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .description {</span></span>
<span class="line"><span>    grid-area: description;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.badges {</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    flex-wrap: wrap;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    padding: 0 1rem;</span></span>
<span class="line"><span>    gap: 5px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.badges li {</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    border: 1px solid currentColor;</span></span>
<span class="line"><span>    padding: 0.3em 0.5em 0.15em;</span></span>
<span class="line"><span>    color: #e05d26;</span></span>
<span class="line"><span>    border-radius: 3px;</span></span>
<span class="line"><span>    text-transform: uppercase;</span></span>
<span class="line"><span>    font-size: 85%;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    line-height: 1;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .title {</span></span>
<span class="line"><span>    padding: 0 1rem;</span></span>
<span class="line"><span>    font-size: clamp(1.25em, 2vw + 1.35rem, 1.75em);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .votes {</span></span>
<span class="line"><span>    padding: 0 1rem;</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    gap: 2px;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    color: #e05d26;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.votes span {</span></span>
<span class="line"><span>    color: #666;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .description {</span></span>
<span class="line"><span>    padding: 0 1rem 1rem;</span></span>
<span class="line"><span>    font-size: 90%;</span></span>
<span class="line"><span>    line-height: 1.6;</span></span>
<span class="line"><span>    color: #666;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card button {</span></span>
<span class="line"><span>    -webkit-appearance: button;</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    padding: 6px 14px 6px 12px;</span></span>
<span class="line"><span>    border-radius: 4px;</span></span>
<span class="line"><span>    border: 2px solid currentColor;</span></span>
<span class="line"><span>    color: #e05d26;</span></span>
<span class="line"><span>    background: #fff;</span></span>
<span class="line"><span>    cursor: pointer;</span></span>
<span class="line"><span>    font-weight: bold;</span></span>
<span class="line"><span>    gap: 5px;</span></span>
<span class="line"><span>    transition: all 0.2s linear;</span></span>
<span class="line"><span>    box-shadow: 0 0 0.2em 0.2em rgb(0 0 0 / 15%);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card button:hover {</span></span>
<span class="line"><span>    opacity: 0.8;</span></span>
<span class="line"><span>} </span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card button:focus {</span></span>
<span class="line"><span>    outline-offset: 2px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card button {</span></span>
<span class="line"><span>    grid-area: thumbnail;</span></span>
<span class="line"><span>    justify-self: end;</span></span>
<span class="line"><span>    align-self: start;</span></span>
<span class="line"><span>    margin-top: 1rem;</span></span>
<span class="line"><span>    margin-right: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .lists {</span></span>
<span class="line"><span>    display: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Container Queries Layout*/</span></span>
<span class="line"><span>.card__container {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* .card__container 宽度大于 650px */</span></span>
<span class="line"><span>@container (inline-size &gt; 650px) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 300px minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-rows: 1rem repeat(5, auto) minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;thumbnail  .&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  badges&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  title&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  votes&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  description&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  button&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  .&quot;;</span></span>
<span class="line"><span>        column-gap: 1.5rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card button {</span></span>
<span class="line"><span>        grid-area: button;</span></span>
<span class="line"><span>        justify-self: start;</span></span>
<span class="line"><span>        align-self: center;</span></span>
<span class="line"><span>        margin: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        border-radius: 8px 0 0 8px;</span></span>
<span class="line"><span>        aspect-ratio: 1;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .title,</span></span>
<span class="line"><span>    .card .badges,</span></span>
<span class="line"><span>    .card .votes,</span></span>
<span class="line"><span>    .card .description {</span></span>
<span class="line"><span>        padding: 0 1rem 0 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* .card__container 宽度大于 820px */</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (inline-size &gt; 820px) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 420px minmax(0, 1fr) auto;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;thumbnail  .            .&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  badges       lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  title        lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  votes        lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  description  lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  button       lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  .            .&quot;;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .lists {</span></span>
<span class="line"><span>        display: flex;</span></span>
<span class="line"><span>        flex-direction: column;</span></span>
<span class="line"><span>        padding-right: 1rem;</span></span>
<span class="line"><span>        grid-area: lists;</span></span>
<span class="line"><span>        gap: 0.5rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .lists dt {</span></span>
<span class="line"><span>        font-size: 1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .lists dd {</span></span>
<span class="line"><span>        font-size: 85%;</span></span>
<span class="line"><span>        color: #666;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .title,</span></span>
<span class="line"><span>    .card .badges,</span></span>
<span class="line"><span>    .card .votes,</span></span>
<span class="line"><span>    .card .description {</span></span>
<span class="line"><span>        padding: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        aspect-ratio: 4 / 3;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br><span class="line-number">210</span><br><span class="line-number">211</span><br><span class="line-number">212</span><br></div></div><p>拖动卡片右下角的滑块，改变 <code>.card__container</code> 容器大小，你可以看到卡片组件（<code>.card</code>）UI 效果的变化：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15e3014cd1d54e148d3f9bbbbb947736~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/QWBKdzP" target="_blank" rel="noreferrer">https://codepen.io/airen/full/QWBKdzP</a></p></blockquote><p><code>@container</code> 规则，其工作方式与使用 <code>@media</code> 的媒体查询类似，不同的是，<code>@container</code> 查询父容器以获取信息，而不是视口和浏览器的 UserAgent。</p><h2 id="容器查询的使用" tabindex="-1">容器查询的使用 <a class="header-anchor" href="#容器查询的使用" aria-label="Permalink to &quot;容器查询的使用&quot;">​</a></h2><p>上面的示例说明了容器查询是什么，我想有不少同学应该不知道上面代码具体的含义。那我们就先从 <code>@container</code> 和 <code>container</code> 聊起。</p><h3 id="container-和-container" tabindex="-1">@container 和 container <a class="header-anchor" href="#container-和-container" aria-label="Permalink to &quot;@container 和 container&quot;">​</a></h3><p><code>container</code> 和 <code>@container</code> 是 <a href="https://drafts.csswg.org/css-contain-3/#containment-types" target="_blank" rel="noreferrer">CSS Containment Module Level 3</a> 新增的两个属性，它们看上去非常相似，但有着本质的区别：</p><ul><li><code>container</code> 是 <code>container-type</code> 和 <code>container-name</code> 的简写属性，用来显式声明某个元素是一个查询容器，并且定义查询容器的类型（可以由 <code>container-type</code> 指定）和查询容器的名称（由 <code>container-name</code> 指定）。</li><li><code>@container</code>（带有 <code>@</code> 规则），它类似于条件 CSS 中的 <code>@media</code> 或 <code>@supports</code> 规则，是一个条件组规则，其条件是一个容器查询，它是大小（<code>size</code>）和（或）样式（<code>style</code>）查询的布尔组合。只有当其条件为真（<code>true</code>），<code>@container</code> 规则块中的样式都会被用户代理运用，否则将被视为无效，被用户代理忽略。</li></ul><h3 id="定义一个包含性上下文" tabindex="-1">定义一个包含性上下文 <a class="header-anchor" href="#定义一个包含性上下文" aria-label="Permalink to &quot;定义一个包含性上下文&quot;">​</a></h3><p>要使用 CSS 容器查询特性，<strong>首先要定义一个包含性上下文（Containment Context）</strong> 。这个有点类似于使用 Flexbox 和 Grid 布局（定义 Flexbox 或 Grid 上下文使用的是 <code>display</code> 属性），只不过，定义一个包含性的上下文使用的不是我们熟知的 <code>display</code> 属性，而是一个新的 CSS 属性，即 <strong><code>container</code></strong> 。</p><p>在一个元素上显式使用 <code>container</code> 可以告诉浏览器以后要针对这个容器进行查询，以及具体如何查询该指定的容器。比如，上面演示的示例中，我们在 <code>.card__container</code> 元素上（<code>.card</code> 的父容器）显式设置了 <code>container-type</code> 的值为 <code>inline-size</code>:</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container { </span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>上面的代码告诉浏览器，可以基于 <code>.card__container</code> 容器的内联轴（Inline Axis）方向尺寸变化进行查询。也就是说，当 <code>.card__container</code> 容器宽度大小变化到指定的某个值时，其后代元素的样式就可以进行调整。</p><p><code>container-type</code> 是 <code>container</code> 属性中的一个子属性，另外，还可以显式使用 <code>container-name</code> 来命名你的容器，即<strong>给一个包含性上下文指定一个具体的名称</strong> ：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container { </span></span>
<span class="line"><span>    container-name: card; </span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>这种方式对于同一个上下文中有多个包含性上下文时非常有意义，可以更明确地知道哪些查询会影响元素。</p><p>你可以使用简写属性 <code>container</code>，只不过需要在 <code>container-type</code> 和 <code>container-name</code> 之间添加斜杠分割符 <code>/</code>：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container { </span></span>
<span class="line"><span>    container-type: inline-size; </span></span>
<span class="line"><span>    container-name: card; </span></span>
<span class="line"><span>} </span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 等同于 */ </span></span>
<span class="line"><span>.card__container { </span></span>
<span class="line"><span>    container: card / inline-size; </span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>在使用</strong> <strong><code>container</code>简写方式时，<code>container-name</code></strong> <strong>要放在</strong> <strong><code>/</code></strong> <strong>前，<code>container-type</code></strong> <strong>要放在</strong> <strong><code>/</code></strong> <strong>后</strong> 。</p><p>另外，如果一个容器查询被应用到一个没有定义为包含上下文的祖先元素上，查询将无法应用。也就是说，无论是 <code>body</code> 还是 <code>html</code> 元素，都没有默认的回退包含上下文。而且，定义包含上下文名称时不能是 CSS 的关键词，比如 <code>default</code>、<code>inherit</code>、<code>initial</code> 等。</p><blockquote><p>注意：<code>container-name</code> 可以省略，如果省略将会使用其初始值 <code>none</code>，但 <code>container-type</code> 不可省略，如果省略的话则表示未显式声明包含性上下文！</p></blockquote><h3 id="定义一个容器查询" tabindex="-1">定义一个容器查询 <a class="header-anchor" href="#定义一个容器查询" aria-label="Permalink to &quot;定义一个容器查询&quot;">​</a></h3><p>现在我们知道使用 <code>container</code>（或其子属性 <code>container-type</code> 和 <code>container-name</code>）对一个元素显式声明包含上下文（对一个元素应用包含性）。</p><p>CSS 包含性上下文提供了一种方法来隔离页面的各个部分，并向浏览器声明这些部分在样式和布局方面与页面的其他部分是独立的。也就是说，有了这个包含性上下文之后，就可以使用 CSS 的 <code>@</code> 规则 <code>@container</code> 来对应用了包含性元素进行查询，即<strong>对容器进行查询</strong> 。<code>@container</code> 规则的使用和 <code>@media</code> 以及 <code>@supports</code> 相似：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>@container (width &gt; 45rem) { </span></span>
<span class="line"><span>    /* 应用了包含性上下文后代元素的 CSS */ </span></span>
<span class="line"><span>} </span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container card (width &gt; 45rem) { </span></span>
<span class="line"><span>    /* 应用了包含性上下文后代元素的 CSS */ </span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>这两种方式都是正确的使用姿势，第二个示例中的 <code>card</code> 指的是 <code>container-name</code> 显式声明的包含性上下文的名称。如果在 <code>@container</code> 中没有指定查询的容器名称，那么这个查询将是针对离样式变化最近的声明了包含性上下文的元素进行查询。比如：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>@container (width &gt; 30em) { </span></span>
<span class="line"><span>    .card { </span></span>
<span class="line"><span>        border-radius: 20px; </span></span>
<span class="line"><span>    } </span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>表示这个查询将是针对 <code>.card</code> 元素最近的显式声明了包含性上下文的元素进行查询。</p><p>我们拿 <a href="https://codepen.io/una/full/NWgxXGV" target="_blank" rel="noreferrer">@Una Kravets 在 Codepen 上的案例来举例</a>，因为这个案例有一个特点，查询容器嵌套：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.cart-button-container {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.cart-icon {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 购物车宽度大于或等于 30px */ </span></span>
<span class="line"><span>@container (width &gt; 30px) {</span></span>
<span class="line"><span>    .cart-lines-group {</span></span>
<span class="line"><span>        display: block;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 购物车宽度大于或等于 50px ，显示 &quot;+&quot; 符号 */ </span></span>
<span class="line"><span>@container (width &gt; 50px) {</span></span>
<span class="line"><span>    .plus-group {</span></span>
<span class="line"><span>        display: block;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 购物车宽度在 100px 时， Add 替代 “+” 符号 */</span></span>
<span class="line"><span>@container (width &gt; 100px) {</span></span>
<span class="line"><span>    .cart-button {</span></span>
<span class="line"><span>        padding: 0 1rem;</span></span>
<span class="line"><span>        display: grid;</span></span>
<span class="line"><span>        max-width: 120px;</span></span>
<span class="line"><span>        grid-template-columns: 1fr 1fr;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .plus-group {</span></span>
<span class="line"><span>        display: none;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .cart-text .add {</span></span>
<span class="line"><span>        display: inline-block;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .cart-icon {</span></span>
<span class="line"><span>       margin-right: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 更大的空间时，按钮添加 “Add to cart” */</span></span>
<span class="line"><span>@container (width &gt; 220px) {</span></span>
<span class="line"><span>    .cart-button {</span></span>
<span class="line"><span>        max-width: 260px;</span></span>
<span class="line"><span>        grid-template-columns: 1fr 3fr;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .cart-text .to-cart {</span></span>
<span class="line"><span>        display: inline-block;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Product Card */ </span></span>
<span class="line"><span>.product-card {</span></span>
<span class="line"><span>    padding: 1rem;</span></span>
<span class="line"><span>    border: 3px solid var(--btn-bg);</span></span>
<span class="line"><span>    text-align: center;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.product-card img {</span></span>
<span class="line"><span>    width: 100%;</span></span>
<span class="line"><span>    display: block;</span></span>
<span class="line"><span>    max-width: 200px;</span></span>
<span class="line"><span>    margin: 0 auto;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.product-card .desc {</span></span>
<span class="line"><span>    display: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.product-card .title {</span></span>
<span class="line"><span>    text-transform: uppercase;</span></span>
<span class="line"><span>    color: magenta;</span></span>
<span class="line"><span>    font-size: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.product-card .price {</span></span>
<span class="line"><span>    display: block;</span></span>
<span class="line"><span>    margin: 1rem 0;</span></span>
<span class="line"><span>    line-height: 0;</span></span>
<span class="line"><span>    font-style: italic;</span></span>
<span class="line"><span>    color: #00b371;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Product Card Responsive */ </span></span>
<span class="line"><span>.product-card-container {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>    container-name: product-card-container;</span></span>
<span class="line"><span>    width: 100%;</span></span>
<span class="line"><span>    max-width: 640px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.product-card .cart-button {</span></span>
<span class="line"><span>    margin: 0 auto;</span></span>
<span class="line"><span>    container-name: product-card-container;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 200px) {</span></span>
<span class="line"><span>    .product-card .desc {</span></span>
<span class="line"><span>        display: block;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .product-card {</span></span>
<span class="line"><span>        padding: 1rem 1rem 2rem;</span></span>
<span class="line"><span>        border: 5px solid var(--btn-bg);</span></span>
<span class="line"><span>        text-align: left;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .product-card .title {</span></span>
<span class="line"><span>        font-size: 1.25rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .product-card .price {</span></span>
<span class="line"><span>        font-size: 1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 250px) {</span></span>
<span class="line"><span>    .product-card {</span></span>
<span class="line"><span>        border: 11px solid var(--btn-bg);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .product-card .title {</span></span>
<span class="line"><span>        font-size: 1.5rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .product-card .price {</span></span>
<span class="line"><span>        font-size: 1.25rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container product-card-container (width &gt;  400px) {</span></span>
<span class="line"><span>    .product-card {</span></span>
<span class="line"><span>        display: grid;</span></span>
<span class="line"><span>        grid-template-columns: 1fr 1fr;</span></span>
<span class="line"><span>        align-items: center;</span></span>
<span class="line"><span>        gap: 2rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .product-card .cart-button {</span></span>
<span class="line"><span>        margin: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/160504ca68cc439ea42fcf53c5c5884e~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/jOpMmZa" target="_blank" rel="noreferrer">https://codepen.io/airen/full/jOpMmZa</a></p></blockquote><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0052e9d1703a4b26bedbcff91d7ee06c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如上图所示， <code>.product-card-container</code> 、<code>.card-button-container</code> 和 <code>.cart-icon</code> 都是一个包含性上下文，因为它们都显式地设置了 <code>container-type</code> 的值为 <code>inline-size</code> 。如果没有使用 <code>container-type</code> 命名，那么像 <code>.card-button</code> 会先根据 <code>.cart-button-container</code> 查询容器进行查询，因为该包含性上下文离其最近。</p><h3 id="示例-容器查询卡片" tabindex="-1">示例：容器查询卡片 <a class="header-anchor" href="#示例-容器查询卡片" aria-label="Permalink to &quot;示例：容器查询卡片&quot;">​</a></h3><p>我想大家对容器查询有了一个初步的认识。接下来，我们把前面示例中的卡片组件放到相应的布局中，比如把卡片分别放置到左侧边栏和主内容栏中：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77005055ea1d4283b56b9f059a7d2f26~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/yLqawaQ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/yLqawaQ</a></p></blockquote><p>我们把带有容器查询特性的卡片组件 <code>.card</code> 分别放置在页面的左侧边栏 <code>aside</code> 和主内容栏 <code>main</code> 中。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;body&gt;</span></span>
<span class="line"><span>    &lt;header&gt;.header&lt;/header&gt;</span></span>
<span class="line"><span>    &lt;main&gt;</span></span>
<span class="line"><span>        &lt;div class=&quot;card__container&quot; style=&quot;--c: darkorchid&quot;&gt;</span></span>
<span class="line"><span>            &lt;!-- Card 组件需要的 HTML 结构 --&gt;</span></span>
<span class="line"><span>            &lt;div class=&quot;card&quot;&gt;</span></span>
<span class="line"><span>                &lt;figure&gt;</span></span>
<span class="line"><span>                    &lt;img src=&quot;https://picsum.photos/1024/860?random=1&quot; alt=&quot;thumbnail&quot; /&gt;</span></span>
<span class="line"><span>                &lt;/figure&gt;</span></span>
<span class="line"><span>              &lt;ul class=&quot;badges&quot;&gt;</span></span>
<span class="line"><span>                  &lt;li class=&quot;badge&quot;&gt;Solarpunk&lt;/li&gt;</span></span>
<span class="line"><span>                  &lt;li class=&quot;badge&quot;&gt;Hope&lt;/li&gt;</span></span>
<span class="line"><span>              &lt;/ul&gt;</span></span>
<span class="line"><span>              &lt;h3 class=&quot;title&quot;&gt;We Don’t Have the Right: A Decolonized Approach to Innovation&lt;/h3&gt;</span></span>
<span class="line"><span>              &lt;div class=&quot;votes&quot;&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810464651&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10908&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M777.312598 940.007027c-3.184529 0-6.380314-0.759293-9.307993-2.297322L512.694825 803.484677 257.385045 937.708682c-6.741541 3.543709-14.909571 2.952238-21.070898-1.52268-6.161327-4.475941-9.246595-12.062733-7.959276-19.568684l48.759517-284.289812L70.566172 430.990988c-5.453199-5.316076-7.4159-13.268188-5.062296-20.511149 2.353604-7.242961 8.614192-12.521175 16.150842-13.616112l285.444101-41.47767L494.753197 96.730065c3.370771-6.828522 10.326183-11.153014 17.941628-11.153014 7.615445 0 14.570857 4.323469 17.941628 11.153014l127.654378 258.655991 285.444101 41.47767c7.53665 1.094938 13.797237 6.373151 16.150842 13.616112 2.353604 7.242961 0.390903 15.19405-5.062296 20.511149l-206.54924 201.335495 48.759517 284.289812c1.287319 7.505951-1.798972 15.092743-7.959276 19.568684C785.589099 938.717661 781.461081 940.007027 777.312598 940.007027z&quot; fill=&quot;currentColor&quot; p-id=&quot;10909&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810464651&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10908&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M777.312598 940.007027c-3.184529 0-6.380314-0.759293-9.307993-2.297322L512.694825 803.484677 257.385045 937.708682c-6.741541 3.543709-14.909571 2.952238-21.070898-1.52268-6.161327-4.475941-9.246595-12.062733-7.959276-19.568684l48.759517-284.289812L70.566172 430.990988c-5.453199-5.316076-7.4159-13.268188-5.062296-20.511149 2.353604-7.242961 8.614192-12.521175 16.150842-13.616112l285.444101-41.47767L494.753197 96.730065c3.370771-6.828522 10.326183-11.153014 17.941628-11.153014 7.615445 0 14.570857 4.323469 17.941628 11.153014l127.654378 258.655991 285.444101 41.47767c7.53665 1.094938 13.797237 6.373151 16.150842 13.616112 2.353604 7.242961 0.390903 15.19405-5.062296 20.511149l-206.54924 201.335495 48.759517 284.289812c1.287319 7.505951-1.798972 15.092743-7.959276 19.568684C785.589099 938.717661 781.461081 940.007027 777.312598 940.007027z&quot; fill=&quot;currentColor&quot; p-id=&quot;10909&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810464651&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10908&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M777.312598 940.007027c-3.184529 0-6.380314-0.759293-9.307993-2.297322L512.694825 803.484677 257.385045 937.708682c-6.741541 3.543709-14.909571 2.952238-21.070898-1.52268-6.161327-4.475941-9.246595-12.062733-7.959276-19.568684l48.759517-284.289812L70.566172 430.990988c-5.453199-5.316076-7.4159-13.268188-5.062296-20.511149 2.353604-7.242961 8.614192-12.521175 16.150842-13.616112l285.444101-41.47767L494.753197 96.730065c3.370771-6.828522 10.326183-11.153014 17.941628-11.153014 7.615445 0 14.570857 4.323469 17.941628 11.153014l127.654378 258.655991 285.444101 41.47767c7.53665 1.094938 13.797237 6.373151 16.150842 13.616112 2.353604 7.242961 0.390903 15.19405-5.062296 20.511149l-206.54924 201.335495 48.759517 284.289812c1.287319 7.505951-1.798972 15.092743-7.959276 19.568684C785.589099 938.717661 781.461081 940.007027 777.312598 940.007027z&quot; fill=&quot;currentColor&quot; p-id=&quot;10909&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810464651&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10908&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M777.312598 940.007027c-3.184529 0-6.380314-0.759293-9.307993-2.297322L512.694825 803.484677 257.385045 937.708682c-6.741541 3.543709-14.909571 2.952238-21.070898-1.52268-6.161327-4.475941-9.246595-12.062733-7.959276-19.568684l48.759517-284.289812L70.566172 430.990988c-5.453199-5.316076-7.4159-13.268188-5.062296-20.511149 2.353604-7.242961 8.614192-12.521175 16.150842-13.616112l285.444101-41.47767L494.753197 96.730065c3.370771-6.828522 10.326183-11.153014 17.941628-11.153014 7.615445 0 14.570857 4.323469 17.941628 11.153014l127.654378 258.655991 285.444101 41.47767c7.53665 1.094938 13.797237 6.373151 16.150842 13.616112 2.353604 7.242961 0.390903 15.19405-5.062296 20.511149l-206.54924 201.335495 48.759517 284.289812c1.287319 7.505951-1.798972 15.092743-7.959276 19.568684C785.589099 938.717661 781.461081 940.007027 777.312598 940.007027z&quot; fill=&quot;currentColor&quot; p-id=&quot;10909&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810506945&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;11048&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M902.211 410.358a31.766 31.766 0 0 0-25.644-21.62L644.34 354.994 540.485 144.561a31.765 31.765 0 0 0-56.971 0L379.659 354.995l-232.227 33.744a31.768 31.768 0 0 0-17.606 54.183l168.042 163.8-39.669 231.288a31.765 31.765 0 0 0 46.091 33.487L512 762.298l207.71 109.199c6.915 3.65 22.854 4.496 33.454-2.418 10.086-6.579 14.681-19.151 12.637-31.069l-39.669-231.288 168.041-163.8a31.765 31.765 0 0 0 8.038-32.564zM669.827 572.885a31.766 31.766 0 0 0-9.136 28.117l31.611 184.31-165.521-87.02a31.746 31.746 0 0 0-14.782-3.648 31.755 31.755 0 0 0-14.782 3.648l-165.521 87.02 31.611-184.31a31.766 31.766 0 0 0-9.135-28.117l-133.91-130.53 185.058-26.89a31.765 31.765 0 0 0 23.918-17.377L512 230.396l82.761 167.691a31.765 31.765 0 0 0 23.917 17.377l185.059 26.89-133.91 130.531z&quot; fill=&quot;currentColor&quot; p-id=&quot;11049&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;span&gt;(12 votes)&lt;/span&gt;</span></span>
<span class="line"><span>              &lt;/div&gt;</span></span>
<span class="line"><span>              &lt;p class=&quot;description&quot;&gt;It really is possible to make excellent gluten free pizza at home in your own oven with our recipes and techniques.&lt;/p&gt;</span></span>
<span class="line"><span>              &lt;button&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810575352&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;16052&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M785.749333 849.578667l-274.5344-123.562667-274.568533 123.562667V149.981867c0-4.778667 3.925333-8.738133 8.738133-8.738134h531.626667c4.8128 0 8.738133 3.925333 8.738133 8.738134v699.5968zM777.0112 34.372267H245.384533A111.138133 111.138133 0 0 0 134.2464 145.5104V1016.1152l102.4-48.093867 274.568533-128.989866 274.5344 123.5968 102.4 46.08V145.5104A111.138133 111.138133 0 0 0 777.0112 34.372267z&quot; fill=&quot;currentColor&quot; p-id=&quot;16053&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt; Save</span></span>
<span class="line"><span>              &lt;/button&gt;</span></span>
<span class="line"><span>              &lt;dl class=&quot;lists&quot;&gt;</span></span>
<span class="line"><span>                  &lt;dt&gt;Preparation Time: &lt;/dt&gt;</span></span>
<span class="line"><span>                  &lt;dd&gt;3 hours&lt;/dd&gt;</span></span>
<span class="line"><span>                  &lt;dt&gt;Cooking time:&lt;/dt&gt;</span></span>
<span class="line"><span>                  &lt;dd&gt;25 min&lt;/dd&gt;</span></span>
<span class="line"><span>                  &lt;dt&gt;Serving:&lt;/dt&gt;</span></span>
<span class="line"><span>                  &lt;dd&gt;4-6 persons&lt;/dd&gt;</span></span>
<span class="line"><span>                  &lt;dt&gt;Cost:&lt;/dt&gt;</span></span>
<span class="line"><span>                  &lt;dd&gt;$3/person&lt;/dd&gt;</span></span>
<span class="line"><span>              &lt;/dl&gt;</span></span>
<span class="line"><span>           &lt;/div&gt;</span></span>
<span class="line"><span>        &lt;/div&gt;</span></span>
<span class="line"><span>    &lt;/main&gt;</span></span>
<span class="line"><span>    &lt;aside&gt;</span></span>
<span class="line"><span>        &lt;div class=&quot;card__container&quot; style=&quot;--c: darkorchid&quot;&gt;</span></span>
<span class="line"><span>            &lt;!-- Card 组件需要的 HTML 结构 --&gt;</span></span>
<span class="line"><span>            &lt;div class=&quot;card&quot;&gt;</span></span>
<span class="line"><span>                &lt;figure&gt;</span></span>
<span class="line"><span>                    &lt;img src=&quot;https://picsum.photos/1024/860?random=1&quot; alt=&quot;thumbnail&quot; /&gt;</span></span>
<span class="line"><span>                &lt;/figure&gt;</span></span>
<span class="line"><span>              &lt;ul class=&quot;badges&quot;&gt;</span></span>
<span class="line"><span>                  &lt;li class=&quot;badge&quot;&gt;Solarpunk&lt;/li&gt;</span></span>
<span class="line"><span>                  &lt;li class=&quot;badge&quot;&gt;Hope&lt;/li&gt;</span></span>
<span class="line"><span>              &lt;/ul&gt;</span></span>
<span class="line"><span>              &lt;h3 class=&quot;title&quot;&gt;We Don’t Have the Right: A Decolonized Approach to Innovation&lt;/h3&gt;</span></span>
<span class="line"><span>              &lt;div class=&quot;votes&quot;&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810464651&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10908&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M777.312598 940.007027c-3.184529 0-6.380314-0.759293-9.307993-2.297322L512.694825 803.484677 257.385045 937.708682c-6.741541 3.543709-14.909571 2.952238-21.070898-1.52268-6.161327-4.475941-9.246595-12.062733-7.959276-19.568684l48.759517-284.289812L70.566172 430.990988c-5.453199-5.316076-7.4159-13.268188-5.062296-20.511149 2.353604-7.242961 8.614192-12.521175 16.150842-13.616112l285.444101-41.47767L494.753197 96.730065c3.370771-6.828522 10.326183-11.153014 17.941628-11.153014 7.615445 0 14.570857 4.323469 17.941628 11.153014l127.654378 258.655991 285.444101 41.47767c7.53665 1.094938 13.797237 6.373151 16.150842 13.616112 2.353604 7.242961 0.390903 15.19405-5.062296 20.511149l-206.54924 201.335495 48.759517 284.289812c1.287319 7.505951-1.798972 15.092743-7.959276 19.568684C785.589099 938.717661 781.461081 940.007027 777.312598 940.007027z&quot; fill=&quot;currentColor&quot; p-id=&quot;10909&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810464651&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10908&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M777.312598 940.007027c-3.184529 0-6.380314-0.759293-9.307993-2.297322L512.694825 803.484677 257.385045 937.708682c-6.741541 3.543709-14.909571 2.952238-21.070898-1.52268-6.161327-4.475941-9.246595-12.062733-7.959276-19.568684l48.759517-284.289812L70.566172 430.990988c-5.453199-5.316076-7.4159-13.268188-5.062296-20.511149 2.353604-7.242961 8.614192-12.521175 16.150842-13.616112l285.444101-41.47767L494.753197 96.730065c3.370771-6.828522 10.326183-11.153014 17.941628-11.153014 7.615445 0 14.570857 4.323469 17.941628 11.153014l127.654378 258.655991 285.444101 41.47767c7.53665 1.094938 13.797237 6.373151 16.150842 13.616112 2.353604 7.242961 0.390903 15.19405-5.062296 20.511149l-206.54924 201.335495 48.759517 284.289812c1.287319 7.505951-1.798972 15.092743-7.959276 19.568684C785.589099 938.717661 781.461081 940.007027 777.312598 940.007027z&quot; fill=&quot;currentColor&quot; p-id=&quot;10909&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810464651&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10908&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M777.312598 940.007027c-3.184529 0-6.380314-0.759293-9.307993-2.297322L512.694825 803.484677 257.385045 937.708682c-6.741541 3.543709-14.909571 2.952238-21.070898-1.52268-6.161327-4.475941-9.246595-12.062733-7.959276-19.568684l48.759517-284.289812L70.566172 430.990988c-5.453199-5.316076-7.4159-13.268188-5.062296-20.511149 2.353604-7.242961 8.614192-12.521175 16.150842-13.616112l285.444101-41.47767L494.753197 96.730065c3.370771-6.828522 10.326183-11.153014 17.941628-11.153014 7.615445 0 14.570857 4.323469 17.941628 11.153014l127.654378 258.655991 285.444101 41.47767c7.53665 1.094938 13.797237 6.373151 16.150842 13.616112 2.353604 7.242961 0.390903 15.19405-5.062296 20.511149l-206.54924 201.335495 48.759517 284.289812c1.287319 7.505951-1.798972 15.092743-7.959276 19.568684C785.589099 938.717661 781.461081 940.007027 777.312598 940.007027z&quot; fill=&quot;currentColor&quot; p-id=&quot;10909&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810464651&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10908&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M777.312598 940.007027c-3.184529 0-6.380314-0.759293-9.307993-2.297322L512.694825 803.484677 257.385045 937.708682c-6.741541 3.543709-14.909571 2.952238-21.070898-1.52268-6.161327-4.475941-9.246595-12.062733-7.959276-19.568684l48.759517-284.289812L70.566172 430.990988c-5.453199-5.316076-7.4159-13.268188-5.062296-20.511149 2.353604-7.242961 8.614192-12.521175 16.150842-13.616112l285.444101-41.47767L494.753197 96.730065c3.370771-6.828522 10.326183-11.153014 17.941628-11.153014 7.615445 0 14.570857 4.323469 17.941628 11.153014l127.654378 258.655991 285.444101 41.47767c7.53665 1.094938 13.797237 6.373151 16.150842 13.616112 2.353604 7.242961 0.390903 15.19405-5.062296 20.511149l-206.54924 201.335495 48.759517 284.289812c1.287319 7.505951-1.798972 15.092743-7.959276 19.568684C785.589099 938.717661 781.461081 940.007027 777.312598 940.007027z&quot; fill=&quot;currentColor&quot; p-id=&quot;10909&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810506945&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;11048&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M902.211 410.358a31.766 31.766 0 0 0-25.644-21.62L644.34 354.994 540.485 144.561a31.765 31.765 0 0 0-56.971 0L379.659 354.995l-232.227 33.744a31.768 31.768 0 0 0-17.606 54.183l168.042 163.8-39.669 231.288a31.765 31.765 0 0 0 46.091 33.487L512 762.298l207.71 109.199c6.915 3.65 22.854 4.496 33.454-2.418 10.086-6.579 14.681-19.151 12.637-31.069l-39.669-231.288 168.041-163.8a31.765 31.765 0 0 0 8.038-32.564zM669.827 572.885a31.766 31.766 0 0 0-9.136 28.117l31.611 184.31-165.521-87.02a31.746 31.746 0 0 0-14.782-3.648 31.755 31.755 0 0 0-14.782 3.648l-165.521 87.02 31.611-184.31a31.766 31.766 0 0 0-9.135-28.117l-133.91-130.53 185.058-26.89a31.765 31.765 0 0 0 23.918-17.377L512 230.396l82.761 167.691a31.765 31.765 0 0 0 23.917 17.377l185.059 26.89-133.91 130.531z&quot; fill=&quot;currentColor&quot; p-id=&quot;11049&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt;</span></span>
<span class="line"><span>                  &lt;span&gt;(12 votes)&lt;/span&gt;</span></span>
<span class="line"><span>              &lt;/div&gt;</span></span>
<span class="line"><span>              &lt;p class=&quot;description&quot;&gt;It really is possible to make excellent gluten free pizza at home in your own oven with our recipes and techniques.&lt;/p&gt;</span></span>
<span class="line"><span>              &lt;button&gt;</span></span>
<span class="line"><span>                  &lt;svg t=&quot;1672810575352&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;16052&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                      &lt;path d=&quot;M785.749333 849.578667l-274.5344-123.562667-274.568533 123.562667V149.981867c0-4.778667 3.925333-8.738133 8.738133-8.738134h531.626667c4.8128 0 8.738133 3.925333 8.738133 8.738134v699.5968zM777.0112 34.372267H245.384533A111.138133 111.138133 0 0 0 134.2464 145.5104V1016.1152l102.4-48.093867 274.568533-128.989866 274.5344 123.5968 102.4 46.08V145.5104A111.138133 111.138133 0 0 0 777.0112 34.372267z&quot; fill=&quot;currentColor&quot; p-id=&quot;16053&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                  &lt;/svg&gt; Save</span></span>
<span class="line"><span>              &lt;/button&gt;</span></span>
<span class="line"><span>              &lt;dl class=&quot;lists&quot;&gt;</span></span>
<span class="line"><span>                  &lt;dt&gt;Preparation Time: &lt;/dt&gt;</span></span>
<span class="line"><span>                  &lt;dd&gt;3 hours&lt;/dd&gt;</span></span>
<span class="line"><span>                  &lt;dt&gt;Cooking time:&lt;/dt&gt;</span></span>
<span class="line"><span>                  &lt;dd&gt;25 min&lt;/dd&gt;</span></span>
<span class="line"><span>                  &lt;dt&gt;Serving:&lt;/dt&gt;</span></span>
<span class="line"><span>                  &lt;dd&gt;4-6 persons&lt;/dd&gt;</span></span>
<span class="line"><span>                  &lt;dt&gt;Cost:&lt;/dt&gt;</span></span>
<span class="line"><span>                  &lt;dd&gt;$3/person&lt;/dd&gt;</span></span>
<span class="line"><span>              &lt;/dl&gt;</span></span>
<span class="line"><span>           &lt;/div&gt;</span></span>
<span class="line"><span>        &lt;/div&gt;</span></span>
<span class="line"><span>    &lt;/aside&gt;</span></span>
<span class="line"><span>    &lt;footer&gt;.footer&lt;/footer&gt;</span></span>
<span class="line"><span>&lt;/body&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br></div></div><p>卡片 <code>.card</code> 可以根据其容器 <code>.card__container</code> 的宽度调整 UI 布局：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f7f449b50b34c35bb1a0a0a5c3828e0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/QWBKdzP" target="_blank" rel="noreferrer">https://codepen.io/airen/full/QWBKdzP</a></p></blockquote><p>有了这样一个卡片组件之后，如果将其放在不同的位置，即使是同一页面，同一视窗断点下，也会根据其容器断点自动匹配最为适合的布局（或UI效果）。比如：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01f7a34d3b29457bbbe5b6940e9fb554~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>从上图的效果中不难发现，位于侧边栏 <code>aside</code> 的卡片组件，它始终能保持下图呈现：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4fbe8c546e846d5a20a95302a8de9ab~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>位于 <code>main</code> 栏的卡片将会根据 <code>.card__container</code> 的宽度有着不同的方式呈现：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b04f3388dc64487e904a1362b6387f6c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>就我们这个示例，<code>aside</code> 和 <code>main</code> 的布局，我们采用了 CSS 媒体查询，分别在 <code>768px</code> 和 <code>1024px</code> 断点调整了网格列轨道的尺寸：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>body {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    grid-template-columns: auto;</span></span>
<span class="line"><span>    grid-template-rows: auto;</span></span>
<span class="line"><span>    gap: 1rem;</span></span>
<span class="line"><span>    grid-template-areas:</span></span>
<span class="line"><span>        &quot;header&quot;</span></span>
<span class="line"><span>        &quot;main&quot;</span></span>
<span class="line"><span>        &quot;aside&quot;</span></span>
<span class="line"><span>        &quot;footer&quot;;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>header {</span></span>
<span class="line"><span>    grid-area: header;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>main {</span></span>
<span class="line"><span>    grid-area: main;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>aside {</span></span>
<span class="line"><span>    grid-area: aside;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>footer {</span></span>
<span class="line"><span>    grid-area: footer;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>@media only screen and (min-width: 768px) {</span></span>
<span class="line"><span>    body {</span></span>
<span class="line"><span>        grid-template-columns: 280px minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-rows: auto minmax(0, 1fr) auto;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>          &quot;header header&quot;</span></span>
<span class="line"><span>          &quot;aside main&quot;</span></span>
<span class="line"><span>          &quot;footer footer&quot;;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>@media only screen and (min-width: 1024px) {</span></span>
<span class="line"><span>    body {</span></span>
<span class="line"><span>        grid-template-columns: 380px minmax(0, 1fr);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div><p>加上在 <code>main</code> 栏中的 <code>.grid</code> （卡片列表的容器）采用 CSS Grid 的 RAM 布局技术：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.grid {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>main .grid {</span></span>
<span class="line"><span>    grid-template-columns: repeat(auto-fit, minmax(min(100% - 2rem, 30em), 1fr));</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>让位于 <code>main</code> 栏中的卡片容器 <code>.card__container</code> 会随着 RAM 布局技术的调整具有不同的宽度，它有可能小于 <code>650px</code> ，有可能是 <code>650px ~ 820px</code> 之间，也有可能是大于 <code>820px</code> 。因此，卡片在主内容栏 <code>main</code> 会有三种不同的 UI 呈现。</p><p>除此之外，我们还可以将 <code>aside</code> 和 <code>main</code> 定义为一个包含性上下文。然后在 <code>main</code> 栏中对 <code>.grid</code> 设置不同的列，比如：</p><ul><li>大于 <code>40em</code> 时，<code>.grid</code> 为两列 <code>repeat(2, 1fr)</code>；</li><li>大于 <code>60em</code> 时，<code>.grid</code> 为三列 <code>repeat(3, 1fr)</code>；</li><li>大于 <code>80em</code> 时， <code>.grid</code> 为四列 <code>repeat(4, 1fr)</code>。</li></ul><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba0e22a8e4a74d4eab2e19b961f1f251~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>关键代码如下：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;!-- HTML --&gt; </span></span>
<span class="line"><span>&lt;main&gt;</span></span>
<span class="line"><span>    &lt;!-- 定义一个名为 layout 的容器查询 --&gt; </span></span>
<span class="line"><span>    &lt;div class=&quot;grid&quot;&gt; &lt;!-- 根据main容器宽度，调整网布局 --&gt; </span></span>
<span class="line"><span>        &lt;div class=&quot;card__container&quot;&gt;</span></span>
<span class="line"><span>            &lt;!-- 定义一个名为 card 的容器查询 --&gt; </span></span>
<span class="line"><span>            &lt;Card /&gt;&lt;!-- 根据卡片容器 card__container 的宽度调整 Card 组件UI --&gt; </span></span>
<span class="line"><span>        &lt;/div&gt; </span></span>
<span class="line"><span>    &lt;/div&gt; </span></span>
<span class="line"><span>&lt;/main&gt; </span></span>
<span class="line"><span>&lt;aside&gt;</span></span>
<span class="line"><span>    &lt;!-- 定义一个名为 layout 的容器查询 --&gt; </span></span>
<span class="line"><span>    &lt;div class=&quot;grid&quot;&gt;&lt;!-- 根据 aside 容器宽度，调整网布局 --&gt; </span></span>
<span class="line"><span>        &lt;div class=&quot;card__container&quot;&gt;&lt;!-- 定义一个名为 component 的容器查询 --&gt; </span></span>
<span class="line"><span>            &lt;Card /&gt;&lt;!-- 根据卡片容器 card__container 的宽度调整 Card 组件UI --&gt; </span></span>
<span class="line"><span>        &lt;/div&gt; </span></span>
<span class="line"><span>    &lt;/div&gt; </span></span>
<span class="line"><span>&lt;/aside&gt;</span></span>
<span class="line"><span>aside,</span></span>
<span class="line"><span>main {</span></span>
<span class="line"><span>    container-name: layout;</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.grid {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container layout (width &gt; 40em) {</span></span>
<span class="line"><span>    .grid {</span></span>
<span class="line"><span>        grid-template-columns: repeat(2, 1fr);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container layout (width &gt; 60em) {</span></span>
<span class="line"><span>    .grid {</span></span>
<span class="line"><span>        grid-template-columns: repeat(3, 1fr);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container layout (width &gt; 80em) {</span></span>
<span class="line"><span>    .grid {</span></span>
<span class="line"><span>        grid-template-columns: repeat(4, 1fr);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Container Queries Layout*/</span></span>
<span class="line"><span>.card__container {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>    container-name: card;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* .card__container 宽度大于 650px */</span></span>
<span class="line"><span>@container card (inline-size &gt; 650px) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 300px minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-rows: 1rem repeat(5, auto) minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;thumbnail  .&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  badges&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  title&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  votes&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  description&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  button&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  .&quot;;</span></span>
<span class="line"><span>          column-gap: 1.5rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card button {</span></span>
<span class="line"><span>        grid-area: button;</span></span>
<span class="line"><span>        justify-self: start;</span></span>
<span class="line"><span>        align-self: center;</span></span>
<span class="line"><span>        margin: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        border-radius: 8px 0 0 8px;</span></span>
<span class="line"><span>        aspect-ratio: 1;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .title,</span></span>
<span class="line"><span>    .card .badges,</span></span>
<span class="line"><span>    .card .votes,</span></span>
<span class="line"><span>    .card .description {</span></span>
<span class="line"><span>        padding: 0 1rem 0 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* .card__container 宽度大于 820px */</span></span>
<span class="line"><span>@container card (inline-size &gt; 820px) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 420px minmax(0, 1fr) auto;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>          &quot;thumbnail  .            .&quot;</span></span>
<span class="line"><span>          &quot;thumbnail  badges       lists&quot;</span></span>
<span class="line"><span>          &quot;thumbnail  title        lists&quot;</span></span>
<span class="line"><span>          &quot;thumbnail  votes        lists&quot;</span></span>
<span class="line"><span>          &quot;thumbnail  description  lists&quot;</span></span>
<span class="line"><span>          &quot;thumbnail  button       lists&quot;</span></span>
<span class="line"><span>          &quot;thumbnail  .            .&quot;;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .lists {</span></span>
<span class="line"><span>        display: flex;</span></span>
<span class="line"><span>        flex-direction: column;</span></span>
<span class="line"><span>        padding-right: 1rem;</span></span>
<span class="line"><span>        grid-area: lists;</span></span>
<span class="line"><span>        gap: 0.5rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .lists dt {</span></span>
<span class="line"><span>        font-size: 1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .lists dd {</span></span>
<span class="line"><span>        font-size: 85%;</span></span>
<span class="line"><span>        color: #666;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .title,</span></span>
<span class="line"><span>    .card .badges,</span></span>
<span class="line"><span>    .card .votes,</span></span>
<span class="line"><span>    .card .description {</span></span>
<span class="line"><span>        padding: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        aspect-ratio: 4 / 3;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed9e41f698734e13ab414b1d9abce2e9~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/QWBKRmg" target="_blank" rel="noreferrer">https://codepen.io/airen/full/QWBKRmg</a></p></blockquote><p>我们前面有提到过，Web 内容输出是动态的，可能因为卡片的扩展或收缩，CSS Flexbox 布局最终呈现的效果会和设计效果不一致：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c5815e2204442c69a523773f124c9a2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>但有了 CSS 容器查询特性之后，这一切都变得很简单。就拿上面的示例来说，如果我们使用跨越多列来模拟卡片数量输出的不一致，你会发现，使用了容器查询的卡片会因为其查询容易自动匹配相应的布局效果：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>aside,</span></span>
<span class="line"><span>main {</span></span>
<span class="line"><span>    container-name: layout;</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.grid {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 1rem;</span></span>
<span class="line"><span>    grid-auto-flow: dense;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>@container layout (width &gt; 40em) {</span></span>
<span class="line"><span>    .grid {</span></span>
<span class="line"><span>        grid-template-columns: repeat(2, 1fr);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span></span></span>
<span class="line"><span>    main .grid .card__container:nth-child(2n + 1) {</span></span>
<span class="line"><span>        grid-column: span 2;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>@container layout (width &gt; 60em) {</span></span>
<span class="line"><span>    .grid {</span></span>
<span class="line"><span>        grid-template-columns: repeat(3, 1fr);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    main .grid .card__container:nth-child(2n + 1) {</span></span>
<span class="line"><span>        grid-column: span 3;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>@container layout (width &gt; 80em) {</span></span>
<span class="line"><span>    .grid {</span></span>
<span class="line"><span>        grid-template-columns: repeat(4, 1fr);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span></span></span>
<span class="line"><span>    main .grid .card__container:nth-child(2n + 1) {</span></span>
<span class="line"><span>        grid-column: span 4;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71c25ebbf4e74fed9283323626190932~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/vYaXqNK" target="_blank" rel="noreferrer">https://codepen.io/airen/full/vYaXqNK</a></p></blockquote><h2 id="容器查询解决的是什么问题" tabindex="-1">容器查询解决的是什么问题？ <a class="header-anchor" href="#容器查询解决的是什么问题" aria-label="Permalink to &quot;容器查询解决的是什么问题？&quot;">​</a></h2><p>众所周知，响应式 Web 设计的概念的核心是 CSS 媒体查询的出现，它允许开发者根据浏览器视窗的尺寸来设置各种样式规则。也正因此，响应式 Web 设计和 CSS 媒体查询开启了更多的 Web 布局解决方案，以及多年来围绕响应视窗尺寸创建的最佳实践。而且，近些年来，设计系统和组件库也得到了更广泛的普及。对于更多开发者而言，更大的期望是：<strong>一次建成，随地部署</strong> ！</p><p>这也意味着一个单独开发的 Web 组件可以在任何情况下工作，使得建立的复杂界面更加有效和一致。只不过，这些组件会组合在一起，形成一个 Web 页面或 Web 应用界面。</p><p>目前，在只有媒体查询的情况下，往往需要额外的一层来协调跨视窗大小变化的组件的突变。在这些情况下，你可能不得不在更多的断点下，使用更多的类名来设置不同的样式规则。甚至更惨的是，即使这样做，很多情况之下仍然也无法达到最理想的 UI 表面。</p><p>很多时候，响应式 Web 设计不是关于浏览器视窗尺寸，而是关于容器的尺寸大小，比如：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6276e844b4854f0cbe16fb927ee38933~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>庆幸的是，CSS 容器查询的出现，使我们超越了只考虑浏览器视窗尺寸的范围，并允许任何组件或元素对定义的容器尺寸做出响应。因此，虽然你可能仍然使用响应式来给 Web 页面布局，但 Web 页面的任何一个组件都可能通过容器查询来定义自己的样式变化。然后，它可以根据它是在一个窄的还是宽的容器中显示，来调整它的样式。</p><blockquote><p><strong>容器查询使我们不再只考虑浏览器视窗尺寸大小，而是允许任何组件或元素对定义的容器尺寸做出响应</strong> ！</p></blockquote><p>也就是说，有了 CSS 容器查询，你就能以一种非常精确和可预测的方式定义一个组件的全部样式。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0e63613edb7428389f3ac57cb5d1884~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="设计时考虑容器查询" tabindex="-1">设计时考虑容器查询 <a class="header-anchor" href="#设计时考虑容器查询" aria-label="Permalink to &quot;设计时考虑容器查询&quot;">​</a></h2><p>虽然响应式 Web 设计给 Web 设计师带来了更多的可能性，但响应式 Web 设计还是有很多的局限性。对于 Web 设计师而言，更期待的是能够根据组件容器尺寸来提供不同的设计风格。依旧拿卡片组件来举例：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dc3d4b806a743a08bf13aa0dfec7ef4~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>也就是说，CSS 容器查询特性来了之后，作为一名 Web 设计师，在设计 Web 页面（或组件）时，就需要基于容器尺寸考虑如何设计。这样一来，可以向 Web 开发人员提供组件的细节和变化，Web 开发人员也可以基于这些细节进行编码（进行开发）。</p><p>不过，这并不意味着容器查询特性之后，响应式 Web 设计是就失去了意义。在未来，容器查询和响应式设计是共存的，简单地说，Web 设计师在设计组件时可能会将组件分为以下几个部分：</p><ul><li>基于视窗（CSS 媒体查询）；</li><li>基于容器（CSS 容器查询）；</li><li>通用型（不受影响的组件）。</li></ul><p>比如：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06fbf92e923442e0998f8c5a59ecabc4~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>在未来，Web 设计师给 Web 开发者投喂的设计稿可能就会像下图这样了：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00b0103f11fe4861be272bafb3349749~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>或许因为容器查询的到来，设计师在设计 Web 的时候，也可能会做出相应的调整。投喂给 Web 开发的设计稿也可能会和以往的模式有所差异。那么这个时候，Web 开发者就需要正确理解设计师的意图了。比如，Web 设计师可能在未来的设计中提供向下图的卡片组件设计：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e70a570ffee740ddab9c861cdca7288d~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>作为 Web 开发人员，看到上图设计效果，需要改变以往对设计图意图的理解，不能继续执着于基于视窗尺寸来调整组件 UI。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9094d802c2294cb58da5a9380a84c8d4~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>上图是基于视窗的一种开发模式，需要为卡片组件设置不同的类名，并且基于视窗尺寸，在相应的类名下调整卡片组件 UI。有了容器特性时，我们可以基于现代的 Web 布局技术，比如 Flexbox 或 Grid 布局，让卡片组件基于其容器来调整其 UI：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1fd2475dbc974b11a9ac5591bba3c394~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如上图所示，可以基于视窗大小采用 CSS 媒体查询特性，Flexbox 或 Grid 布局等技术改变卡片容器 <code>.card__container</code> 的大小，从而让卡片组件根据其容器尺寸大小做出相应响应。</p><p>拥有一个能根据其父容器尺寸做出响应（UI 调整）的组件是非常有用的，正如你看到的，我们可以只构建一个组件，就可以满足不同视窗布局下的设计诉求！</p><h2 id="容器查询不应该让组件变得复杂化" tabindex="-1">容器查询不应该让组件变得复杂化 <a class="header-anchor" href="#容器查询不应该让组件变得复杂化" aria-label="Permalink to &quot;容器查询不应该让组件变得复杂化&quot;">​</a></h2><p>组件是由很多个元素组合在一起构成的：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8153b89132914976bcd69b15ffc1f616~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>虽然容器查询特性到来，可以让组件根据其容器尺寸来做出响应，但要记住的是，做出响应变化应该要有一个度。如果过度设计的话，对于 Web 开发人员而言，与其使用容器查询特性来实现 UI 响应，还不如重新构建一个独立的全新组件。</p><p>拿用户信息组件（<code>UserProfile</code>）为例，组件内部结构保持不变，或者至少不会增加新的结构，只需稍加调整，比如调整布局，就可以实现不同的 UI 效果，或者让内部元素显示隐藏切换等。在这种情景之中，采用容器查询特性才能显现其魅力：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e2b70eece7a4e62ae39bcbe92774aa2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    grid-template-columns: 80px minmax(0, 1fr);</span></span>
<span class="line"><span>    grid-template-rows: auto;</span></span>
<span class="line"><span>    grid-template-areas:</span></span>
<span class="line"><span>        &quot;figure  title&quot;</span></span>
<span class="line"><span>        &quot;figure  description&quot;;</span></span>
<span class="line"><span>    gap: 0.25rem 1rem;</span></span>
<span class="line"><span>    background-color: #fff;</span></span>
<span class="line"><span>    padding: 1rem;</span></span>
<span class="line"><span>    border-radius: 8px;</span></span>
<span class="line"><span>    box-shadow: 0 0 0.5em 0.5em rgb(0 0 0 / 0.125);</span></span>
<span class="line"><span>    color: #ce0063;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    align-content: center;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>figure {</span></span>
<span class="line"><span>    grid-area: figure;</span></span>
<span class="line"><span>    border-radius: 50%;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>    border: 2px solid currentColor;</span></span>
<span class="line"><span>    aspect-ratio: 1;</span></span>
<span class="line"><span>    padding: 4px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card h3 {</span></span>
<span class="line"><span>    grid-area: title;</span></span>
<span class="line"><span>    line-height: 1;</span></span>
<span class="line"><span>    font-size: 1.25rem;</span></span>
<span class="line"><span>    align-self: end;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card p {</span></span>
<span class="line"><span>    grid-area: description;</span></span>
<span class="line"><span>    margin: 0;</span></span>
<span class="line"><span>    font-size: 90%;</span></span>
<span class="line"><span>    color: #797e8a;</span></span>
<span class="line"><span>    align-self: start;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card ul {</span></span>
<span class="line"><span>    display: none;</span></span>
<span class="line"><span>    width: 100%;</span></span>
<span class="line"><span>    padding-top: 1rem;</span></span>
<span class="line"><span>    border-top: 3px solid;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card svg {</span></span>
<span class="line"><span>    color: #ce0063;</span></span>
<span class="line"><span>    font-size: 48px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card__container {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 20rem) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: auto;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;figure&quot;</span></span>
<span class="line"><span>            &quot;title&quot;</span></span>
<span class="line"><span>            &quot;description&quot;</span></span>
<span class="line"><span>            &quot;media&quot;;</span></span>
<span class="line"><span>        place-items: center;</span></span>
<span class="line"><span>        text-align: center;</span></span>
<span class="line"><span>        row-gap: 0.75rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    figure {</span></span>
<span class="line"><span>        max-width: 160px;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card ul {</span></span>
<span class="line"><span>        display: flex;</span></span>
<span class="line"><span>        grid-area: media;</span></span>
<span class="line"><span>        justify-content: space-evenly;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card h3 {</span></span>
<span class="line"><span>        font-size: clamp(1.25rem, 2vw + 1.5rem, 1.75rem);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 35rem) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 120px minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;figure   title&quot;</span></span>
<span class="line"><span>            &quot;figure   description&quot;</span></span>
<span class="line"><span>            &quot;media    media&quot;;</span></span>
<span class="line"><span>        text-align: left;</span></span>
<span class="line"><span>        justify-items: start;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 45rem) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 180px minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;figure  title&quot;</span></span>
<span class="line"><span>            &quot;figure  description&quot;</span></span>
<span class="line"><span>            &quot;figure  media&quot;;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card ul {</span></span>
<span class="line"><span>        justify-content: start;</span></span>
<span class="line"><span>        align-self: start;</span></span>
<span class="line"><span>        gap: 1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card svg {</span></span>
<span class="line"><span>        font-size: 24px;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bf0a29068fc4cc0bed7bc0f198078a3~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/JjBRQvG" target="_blank" rel="noreferrer">https://codepen.io/airen/full/JjBRQvG</a></p></blockquote><p>从侧面来说，这一点和 CSS 媒体查询构建的响应式 Web 设计有相似之处。如果一个 Web 组件在不同的断点情况下需要对多个元素进行隐藏，那么你就需要重新思考，如此设计是否合适。</p><p>我们在构建响应式 Web 页面或组件时，根据屏幕尺寸或容器尺寸选择要隐藏或显示的内容时要谨慎。请不要仅仅因为您无法将内容合理安排在屏幕上就简单地将其隐藏。屏幕尺寸并不能明确指示用户的需求。我们应该根据用户的实际需求出发，做出更为适合的选择。</p><h2 id="媒体查询-vs-容器查询" tabindex="-1">媒体查询 vs. 容器查询 <a class="header-anchor" href="#媒体查询-vs-容器查询" aria-label="Permalink to &quot;媒体查询 vs. 容器查询&quot;">​</a></h2><p>你在创建响应式 Web，经常会使用 CSS 媒体查询 <code>@media</code> ，根据浏览器视窗尺寸大小来改变 Web 页面布局。将 HTML 元素分组为可重用的组件是很常见的，这些组件根据页面中的可用空间具有特定的布局。可用空间可能不仅取决于浏览器视窗的尺寸大小，还取决于组件出现的上下文。</p><p>容器查询允许我们查看容器的大小，并根据容器的大小而不是浏览器视窗尺寸大小或其他设备特征为内容应用样式。例如，如果容器周围上下文中的空间较小，则可以隐藏某些元素或使用较小的字体。</p><p>简单地说，媒体查询，查询的是浏览器视窗宽度，而容器查询，查询的是组件容器的宽度。这个容器可以是组件的父元素，也可以是其祖先元素。也就是说，如果需要的话，可以在组件顶层容器上进行查询。用下图可以很清晰地阐述媒体查询和容器查询的差异：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a13c522ecf5941f6ba53a858d4d495c1~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>容器查询和媒体查询两者不是谁替代谁的关系，更应该是两者共存的关系。容器查询特性的出现，我们可以不再局限于视窗断点来调整布局或 UI 样式，还可以基于容器断点来调整布局或 UI 。</p><p>换句话说，<strong>媒体查询是一种宏观的布局（Macro Layout），可以用于整体页面布局；而容器查询可以调整组件的每个元素，创建了一种微观的布局（Micro Layout）</strong> 。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfe193296ef94b0090ef618f691ab311~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>就拿前面的示例为例。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98b0b34be6d0462291f97e4879a2a4f8~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/yLqawaQ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/yLqawaQ</a></p></blockquote><p>页面级的布局（<code>.header</code> 、<code>.aside</code> 、<code>.main</code> 和 <code>.footer</code>）使用了 CSS 媒体查询 <code>@media</code> 来调整布局：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>/* Mobile */</span></span>
<span class="line"><span>body {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    grid-template-columns: auto;</span></span>
<span class="line"><span>    grid-template-rows: auto;</span></span>
<span class="line"><span>    gap: 1rem;</span></span>
<span class="line"><span>    grid-template-areas:</span></span>
<span class="line"><span>        &quot;header&quot;</span></span>
<span class="line"><span>        &quot;main&quot;</span></span>
<span class="line"><span>        &quot;aside&quot;</span></span>
<span class="line"><span>        &quot;footer&quot;;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>header {</span></span>
<span class="line"><span>    grid-area: header;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>main {</span></span>
<span class="line"><span>    grid-area: main;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>aside {</span></span>
<span class="line"><span>    grid-area: aside;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>footer {</span></span>
<span class="line"><span>    grid-area: footer;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* Tablet */</span></span>
<span class="line"><span>@media only screen and (min-width: 768px) {</span></span>
<span class="line"><span>    body {</span></span>
<span class="line"><span>        grid-template-columns: 280px minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-rows: auto minmax(0, 1fr) auto;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;header header&quot;</span></span>
<span class="line"><span>            &quot;aside main&quot;</span></span>
<span class="line"><span>            &quot;footer footer&quot;;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* Desktop */</span></span>
<span class="line"><span>@media only screen and (min-width: 1024px) {</span></span>
<span class="line"><span>    body {</span></span>
<span class="line"><span>        grid-template-columns: 380px minmax(0, 1fr);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.grid {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>main .grid {</span></span>
<span class="line"><span>    grid-template-columns: repeat(auto-fit, minmax(min(100% - 2rem, 30em), 1fr));</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br></div></div><p>组件级（<code>.card</code>）使用了 CSS 容器查询 <code>@container</code> ：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 0.5rem;</span></span>
<span class="line"><span>    grid-template-columns: auto;</span></span>
<span class="line"><span>    grid-template-rows: min-content auto auto auto minmax(0, 1fr);</span></span>
<span class="line"><span>    grid-template-areas:</span></span>
<span class="line"><span>        &quot;thumbnail&quot;</span></span>
<span class="line"><span>        &quot;badges&quot;</span></span>
<span class="line"><span>        &quot;title&quot;</span></span>
<span class="line"><span>        &quot;votes&quot;</span></span>
<span class="line"><span>        &quot;description&quot;;</span></span>
<span class="line"><span>    background-color: #fff;</span></span>
<span class="line"><span>    border-radius: 8px;</span></span>
<span class="line"><span>    color: #333;</span></span>
<span class="line"><span>    height: 100%;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card figure {</span></span>
<span class="line"><span>    border-radius: 8px 8px 0 0;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>    aspect-ratio: 4 / 3;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card figure {</span></span>
<span class="line"><span>    grid-area: thumbnail;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .badges {</span></span>
<span class="line"><span>    grid-area: badges;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .title {</span></span>
<span class="line"><span>    grid-area: title;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .votes {</span></span>
<span class="line"><span>    grid-area: votes;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .description {</span></span>
<span class="line"><span>    grid-area: description;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.badges {</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    flex-wrap: wrap;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    padding: 0 1rem;</span></span>
<span class="line"><span>    gap: 5px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.badges li {</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    border: 1px solid currentColor;</span></span>
<span class="line"><span>    padding: 0.3em 0.5em 0.15em;</span></span>
<span class="line"><span>    color: var(--c, #e05d26);</span></span>
<span class="line"><span>    border-radius: 3px;</span></span>
<span class="line"><span>    text-transform: uppercase;</span></span>
<span class="line"><span>    font-size: 85%;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    line-height: 1;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .title {</span></span>
<span class="line"><span>    padding: 0 1rem;</span></span>
<span class="line"><span>    font-size: clamp(1.25em, 2vw + 1.35rem, 1.75em);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .votes {</span></span>
<span class="line"><span>    padding: 0 1rem;</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    gap: 2px;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    color: #e05d26;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.votes span {</span></span>
<span class="line"><span>    color: #666;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .description {</span></span>
<span class="line"><span>    padding: 0 1rem 1rem;</span></span>
<span class="line"><span>    font-size: 90%;</span></span>
<span class="line"><span>    line-height: 1.6;</span></span>
<span class="line"><span>    color: #666;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card button {</span></span>
<span class="line"><span>    -webkit-appearance: button;</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    padding: 6px 14px 6px 12px;</span></span>
<span class="line"><span>    border-radius: 4px;</span></span>
<span class="line"><span>    border: 2px solid currentColor;</span></span>
<span class="line"><span>    color: #e05d26;</span></span>
<span class="line"><span>    background: #fff;</span></span>
<span class="line"><span>    cursor: pointer;</span></span>
<span class="line"><span>    font-weight: bold;</span></span>
<span class="line"><span>    gap: 5px;</span></span>
<span class="line"><span>    transition: all 0.2s linear;</span></span>
<span class="line"><span>    box-shadow: 0 0 0.2em 0.2em rgb(0 0 0 / 15%);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card button:hover {</span></span>
<span class="line"><span>    opacity: 0.8;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card button:focus {</span></span>
<span class="line"><span>    outline-offset: 2px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card button {</span></span>
<span class="line"><span>    grid-area: thumbnail;</span></span>
<span class="line"><span>    justify-self: end;</span></span>
<span class="line"><span>    align-self: start;</span></span>
<span class="line"><span>    margin-top: 1rem;</span></span>
<span class="line"><span>    margin-right: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card .lists {</span></span>
<span class="line"><span>    display: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Container Queries Layout*/</span></span>
<span class="line"><span>.card__container {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* .card__container 宽度大于 650px */</span></span>
<span class="line"><span>@container (inline-size &gt; 650px) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 300px minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-rows: 1rem repeat(5, auto) minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;thumbnail  .&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  badges&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  title&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  votes&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  description&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  button&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  .&quot;;</span></span>
<span class="line"><span>        column-gap: 1.5rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card button {</span></span>
<span class="line"><span>        grid-area: button;</span></span>
<span class="line"><span>        justify-self: start;</span></span>
<span class="line"><span>        align-self: center;</span></span>
<span class="line"><span>        margin: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        border-radius: 8px 0 0 8px;</span></span>
<span class="line"><span>        aspect-ratio: 1;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .title,</span></span>
<span class="line"><span>    .card .badges,</span></span>
<span class="line"><span>    .card .votes,</span></span>
<span class="line"><span>    .card .description {</span></span>
<span class="line"><span>        padding: 0 1rem 0 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* .card__container 宽度大于 820px */</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (inline-size &gt; 820px) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 420px minmax(0, 1fr) auto;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;thumbnail  .            .&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  badges       lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  title        lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  votes        lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  description  lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  button       lists&quot;</span></span>
<span class="line"><span>            &quot;thumbnail  .            .&quot;;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .lists {</span></span>
<span class="line"><span>        display: flex;</span></span>
<span class="line"><span>        flex-direction: column;</span></span>
<span class="line"><span>        padding-right: 1rem;</span></span>
<span class="line"><span>        grid-area: lists;</span></span>
<span class="line"><span>        gap: 0.5rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .lists dt {</span></span>
<span class="line"><span>        font-size: 1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .lists dd {</span></span>
<span class="line"><span>        font-size: 85%;</span></span>
<span class="line"><span>        color: #666;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card .title,</span></span>
<span class="line"><span>    .card .badges,</span></span>
<span class="line"><span>    .card .votes,</span></span>
<span class="line"><span>    .card .description {</span></span>
<span class="line"><span>        padding: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        aspect-ratio: 4 / 3;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br></div></div><h2 id="容器查询可用于哪些场景" tabindex="-1">容器查询可用于哪些场景？ <a class="header-anchor" href="#容器查询可用于哪些场景" aria-label="Permalink to &quot;容器查询可用于哪些场景？&quot;">​</a></h2><p>现在我们对容器查询有了一定的认识，接下来，我们来看看实际业务中，在哪些场景下使用 CSS 容器查询可以帮助我们快速构建，提高组件扩展性。</p><h3 id="搜索表单" tabindex="-1">搜索表单 <a class="header-anchor" href="#搜索表单" aria-label="Permalink to &quot;搜索表单&quot;">​</a></h3><p>搜索表单在一些业务场景很常见，它会根据容器的宽度有不同的状态，这样的搜索组件就非常适用于 CSS 容器查询：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9fd1c66aeae405d91266d8a8829ce99~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>构建这个搜索表单，可能需要一个这样的 HTML 结构：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;div class=&quot;form__container&quot;&gt;</span></span>
<span class="line"><span>    &lt;form class=&quot;form&quot;&gt;</span></span>
<span class="line"><span>        &lt;svg t=&quot;1638370815485&quot; class=&quot;icon--search&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;3749&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>            &lt;path d=&quot;M874.798784 719.859059a456.211411 456.211411 0 1 0-152.8584 136.311873V659.976387l-8.667229 10.243088a293.897852 293.897852 0 1 1 48.063724-66.186111v228.499671l191.466965 191.466965V800.227909z&quot; p-id=&quot;3750&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>        &lt;/svg&gt;</span></span>
<span class="line"><span>        &lt;input type=&quot;search&quot; placeholder=&quot;皮裤女短裤真皮&quot; name=&quot;search&quot; class=&quot;search&quot; /&gt;</span></span>
<span class="line"><span>        &lt;svg t=&quot;1638370901048&quot; class=&quot;icon--camera&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;6029&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>            &lt;path d=&quot;M846.933333 238.933333h-140.8L646.4 149.333333c-6.4-10.666667-17.066667-17.066667-29.866667-17.066666h-209.066666c-12.8 0-23.466667 6.4-29.866667 17.066666l-59.733333 89.6H177.066667c-57.6 0-106.666667 46.933333-106.666667 106.666667v426.666667c0 57.6 46.933333 106.666667 106.666667 106.666666h672c57.6 0 106.666667-46.933333 106.666666-106.666666v-426.666667c-2.133333-59.733333-49.066667-106.666667-108.8-106.666667z m34.133334 533.333334c0 19.2-14.933333 34.133333-34.133334 34.133333H177.066667c-19.2 0-34.133333-14.933333-34.133334-34.133333v-426.666667c0-19.2 14.933333-34.133333 34.133334-34.133333h160c12.8 0 23.466667-6.4 29.866666-17.066667L426.666667 206.933333h170.666666l59.733334 89.6c6.4 10.666667 17.066667 17.066667 29.866666 17.066667h160c19.2 0 34.133333 14.933333 34.133334 34.133333v424.533334z&quot; p-id=&quot;6030&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>            &lt;path d=&quot;M512 364.8c-96 0-174.933333 78.933333-174.933333 174.933333 0 96 78.933333 174.933333 174.933333 174.933334 96 0 174.933333-78.933333 174.933333-174.933334 0-96-78.933333-174.933333-174.933333-174.933333z m0 279.466667c-57.6 0-104.533333-46.933333-104.533333-104.533334s46.933333-104.533333 104.533333-104.533333 104.533333 46.933333 104.533333 104.533333-46.933333 104.533333-104.533333 104.533334z&quot; p-id=&quot;6031&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>        &lt;/svg&gt;</span></span>
<span class="line"><span>        &lt;button class=&quot;button&quot;&gt;搜索&lt;/button&gt;</span></span>
<span class="line"><span>    &lt;/form&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>使用 CSS 容器查询来完成所需要的搜索表单功能：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.form__container {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.form {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    font-size: 46px;</span></span>
<span class="line"><span>    border: 4px solid #ff5b0a;</span></span>
<span class="line"><span>    background-color: #fff;</span></span>
<span class="line"><span>    border-radius: 10rem;</span></span>
<span class="line"><span>    padding: 10px;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.icon--search,</span></span>
<span class="line"><span>.icon--camera {</span></span>
<span class="line"><span>    width: 1em;</span></span>
<span class="line"><span>    height: 1em;</span></span>
<span class="line"><span>    display: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.search {</span></span>
<span class="line"><span>    display: none;</span></span>
<span class="line"><span>    width: 100%;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>    text-overflow: ellipsis;</span></span>
<span class="line"><span>    height: 100%;</span></span>
<span class="line"><span>    padding: 0 5px;</span></span>
<span class="line"><span>    border: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.button {</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    min-height: 88px;</span></span>
<span class="line"><span>    border: none 0;</span></span>
<span class="line"><span>    background-image: linear-gradient(90deg, #ff9602 0%, #ff5b0a 100%);</span></span>
<span class="line"><span>    border-radius: 10rem;</span></span>
<span class="line"><span>    color: #fff;</span></span>
<span class="line"><span>    font-size: 46px;</span></span>
<span class="line"><span>    font-weight: 700;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 480px) {</span></span>
<span class="line"><span>    ::-webkit-input-placeholder {</span></span>
<span class="line"><span>        /* Chrome/Opera/Safari */</span></span>
<span class="line"><span>        color: #000;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    ::-moz-placeholder {</span></span>
<span class="line"><span>        /* Firefox 19+ */</span></span>
<span class="line"><span>        color: #000;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    ::-ms-input-placeholder {</span></span>
<span class="line"><span>        /* IE 10+ */</span></span>
<span class="line"><span>        color: #000;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    ::-moz-placeholder {</span></span>
<span class="line"><span>        /* Firefox 18- */</span></span>
<span class="line"><span>        color: #000;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    .form {</span></span>
<span class="line"><span>        grid-template-columns: min-content 1fr 200px;</span></span>
<span class="line"><span>        grid-template-areas: &quot;searchIcon searchInput button&quot;;</span></span>
<span class="line"><span>        grid-template-rows: 88px;</span></span>
<span class="line"><span>        gap: 10px;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .icon--search {</span></span>
<span class="line"><span>        display: block;</span></span>
<span class="line"><span>        grid-area: searchIcon;</span></span>
<span class="line"><span>     }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .search {</span></span>
<span class="line"><span>        grid-area: searchInput;</span></span>
<span class="line"><span>        display: flex;</span></span>
<span class="line"><span>        font-weight: 700;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .button {</span></span>
<span class="line"><span>        grid-area: button;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 768px) {</span></span>
<span class="line"><span>    ::-webkit-input-placeholder {</span></span>
<span class="line"><span>        /* Chrome/Opera/Safari */</span></span>
<span class="line"><span>        color: #b4b4b4;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    ::-moz-placeholder {</span></span>
<span class="line"><span>        /* Firefox 19+ */</span></span>
<span class="line"><span>        color: #b4b4b4;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>   ::-ms-input-placeholder {</span></span>
<span class="line"><span>        /* IE 10+ */</span></span>
<span class="line"><span>        color: #b4b4b4;</span></span>
<span class="line"><span>   }</span></span>
<span class="line"><span>   </span></span>
<span class="line"><span>    ::-moz-placeholder {</span></span>
<span class="line"><span>        /* Firefox 18- */</span></span>
<span class="line"><span>        color: #b4b4b4;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    .form {</span></span>
<span class="line"><span>        grid-template-columns: min-content 1fr min-content 200px;</span></span>
<span class="line"><span>        grid-template-areas: &quot;searchIcon searchInput cameraIcon button&quot;;</span></span>
<span class="line"><span>        grid-template-rows: 88px;</span></span>
<span class="line"><span>        gap: 10px;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    .icon--search {</span></span>
<span class="line"><span>        fill: #b4b4b4;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    .search {</span></span>
<span class="line"><span>        color: #b4b4b4;</span></span>
<span class="line"><span>        font-weight: 400;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    .icon--camera {</span></span>
<span class="line"><span>        display: block;</span></span>
<span class="line"><span>        grid-area: cameraIcon;</span></span>
<span class="line"><span>        fill: #b4b4b4;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br></div></div><p>你将看到的效果如下：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b86a704901a4540bf082911fa7dc1b7~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/xxJgaEZ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/xxJgaEZ</a></p></blockquote><h3 id="导航栏" tabindex="-1">导航栏 <a class="header-anchor" href="#导航栏" aria-label="Permalink to &quot;导航栏&quot;">​</a></h3><p>Web 页面导航栏是常见的一个组件，在宽屏和窄屏的时候，它会向用户呈现不同的 UI 效果，如下图所示：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/377da24573e94e7fad69e14c4a3bda2e~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>就拿我自己的博客（<a href="./www.w3cplus.com">www.w3cplus.com</a>）航栏为例吧。它也有类似的效果，只不过是使用 CSS 媒体查询实现的，现在我们使用 CSS 容器查询来实现：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1994924745e64cd18a4f2c29eaad28bd~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>具体代码如下：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;div class=&quot;browser&quot;&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;browser__header&quot;&gt;</span></span>
<span class="line"><span>        &lt;span&gt;&lt;/span&gt;</span></span>
<span class="line"><span>        &lt;span&gt;&lt;/span&gt;</span></span>
<span class="line"><span>        &lt;span&gt;&lt;/span&gt;</span></span>
<span class="line"><span>    &lt;/div&gt;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    &lt;div class=&quot;browser__body&quot;&gt;</span></span>
<span class="line"><span>        &lt;div class=&quot;header&quot;&gt;</span></span>
<span class="line"><span>            &lt;h1 class=&quot;logo&quot;&gt;&lt;a href=&quot;https://www.w3cplus.com&quot;&gt;&lt;img src=&quot;https://www.w3cplus.com/sites/all/themes/w3cplusV2/images/logo.png&quot; alt=&quot;W3cplus&quot;&gt;&lt;/a&gt;&lt;/h1&gt;</span></span>
<span class="line"><span>            &lt;nav class=&quot;menu&quot;&gt;</span></span>
<span class="line"><span>                &lt;ul&gt;</span></span>
<span class="line"><span>                    &lt;li&gt;&lt;a href=&quot;https://www.w3cplus.com/blog/tags/686.html&quot;&gt;会员专栏&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>                    &lt;li&gt;&lt;a href=&quot;https://www.w3cplus.com/CSS3&quot;&gt;CSS&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>                    &lt;li&gt;&lt;a href=&quot;https://www.w3cplus.com/JavaScript&quot;&gt;JavaScript&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>                    &lt;li&gt;&lt;a href=&quot;https://www.w3cplus.com/mobile&quot;&gt;Mobile&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>                    &lt;li&gt;&lt;a href=&quot;https://www.w3cplus.com/svg-tutorial&quot;&gt;SVG&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>                &lt;/ul&gt;</span></span>
<span class="line"><span>            &lt;/nav&gt;</span></span>
<span class="line"><span>            &lt;div class=&quot;menu__icon&quot;&gt;</span></span>
<span class="line"><span>                &lt;span&gt;menu&lt;/span&gt;</span></span>
<span class="line"><span>                &lt;svg t=&quot;1638455499563&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;6454&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M170.666667 213.333333m64 0l554.666666 0q64 0 64 64l0 0q0 64-64 64l-554.666666 0q-64 0-64-64l0 0q0-64 64-64Z&quot; fill=&quot;currentColor&quot; p-id=&quot;6455&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M234.666667 640h554.666666a64 64 0 0 1 0 128h-554.666666a64 64 0 0 1 0-128z m0-213.333333h554.666666a64 64 0 0 1 0 128h-554.666666a64 64 0 0 1 0-128z&quot; fill=&quot;currentColor&quot; p-id=&quot;6456&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                &lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;/div&gt;</span></span>
<span class="line"><span>        &lt;/div&gt;</span></span>
<span class="line"><span>    &lt;/div&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22e4cb8166a3423182bfaa0ed2fc65ec~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/OJwWovo" target="_blank" rel="noreferrer">https://codepen.io/airen/full/OJwWovo</a></p></blockquote><h3 id="分页器" tabindex="-1">分页器 <a class="header-anchor" href="#分页器" aria-label="Permalink to &quot;分页器&quot;">​</a></h3><p>分页器组件（<code>Pagination</code>）类似于导航栏，也很适合于使用容器查询：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ee84e06935c45e5a3b6f1313a5e6136~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;nav class=&quot;pagination__container&quot;&gt;</span></span>
<span class="line"><span>    &lt;ul class=&quot;pagination&quot;&gt;</span></span>
<span class="line"><span>        &lt;li class=&quot;prev&quot;&gt;</span></span>
<span class="line"><span>            &lt;a href=&quot;#&quot;&gt;</span></span>
<span class="line"><span>                &lt;svg t=&quot;1638460279078&quot; class=&quot;icon icon__prev&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;10124&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M701.41952 852.35712a47.18592 47.18592 0 0 1-57.344-4.11648L333.9264 571.53536a79.60576 79.60576 0 0 1 0-119.05024L644.05504 175.73888a47.18592 47.18592 0 0 1 58.83904-3.072c15.29856 11.30496 18.45248 32.768 7.04512 47.9232l-192.14336 255.488a59.65824 59.65824 0 0 0 0 71.80288l192.14336 255.488 1.06496 1.47456a34.05824 34.05824 0 0 1-9.58464 47.49312z&quot; p-id=&quot;10125&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                &lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;/a&gt;</span></span>
<span class="line"><span>        &lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li class=&quot;first&quot;&gt;</span></span>
<span class="line"><span>            &lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;</span></span>
<span class="line"><span>        &lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li class=&quot;more&quot;&gt;</span></span>
<span class="line"><span>            &lt;span&gt;</span></span>
<span class="line"><span>                &lt;svg t=&quot;1638534255503&quot; class=&quot;icon icon__more&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;2311&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M224 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S276.928 608 224 608z&quot; p-id=&quot;2312&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M512 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S564.928 608 512 608z&quot; p-id=&quot;2313&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M800 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S852.928 608 800 608z&quot; p-id=&quot;2314&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                &lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;/span&gt;</span></span>
<span class="line"><span>        &lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li class=&quot;active&quot;&gt;&lt;span&gt;5&lt;/span&gt;&lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;6&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;7&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li class=&quot;more&quot;&gt;</span></span>
<span class="line"><span>            &lt;span&gt;</span></span>
<span class="line"><span>                &lt;svg t=&quot;1638534255503&quot; class=&quot;icon icon__more&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;2311&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M224 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S276.928 608 224 608z&quot; p-id=&quot;2312&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M512 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S564.928 608 512 608z&quot; p-id=&quot;2313&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M800 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S852.928 608 800 608z&quot; p-id=&quot;2314&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                &lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;/span&gt;</span></span>
<span class="line"><span>        &lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li class=&quot;last&quot;&gt;&lt;a href=&quot;#&quot;&gt;10&lt;/a&gt;&lt;/li&gt;</span></span>
<span class="line"><span>        &lt;li class=&quot;next&quot;&gt;</span></span>
<span class="line"><span>            &lt;a href=&quot;#&quot;&gt;</span></span>
<span class="line"><span>                &lt;svg t=&quot;1638460301528&quot; class=&quot;icon icon__next&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;12204&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</span></span>
<span class="line"><span>                    &lt;path d=&quot;M322.58048 852.35712a34.05824 34.05824 0 0 1-8.51968-48.9472l192.14336-255.50848a59.65824 59.65824 0 0 0 0-71.80288l-192.14336-255.488a34.03776 34.03776 0 0 1 8.51968-48.9472 47.18592 47.18592 0 0 1 57.344 4.096l310.12864 276.70528a79.60576 79.60576 0 0 1 0 119.07072l-310.10816 276.6848a47.18592 47.18592 0 0 1-57.344 4.13696z&quot; p-id=&quot;12205&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;</span></span>
<span class="line"><span>                &lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;/a&gt;</span></span>
<span class="line"><span>        &lt;/li&gt;</span></span>
<span class="line"><span>    &lt;/ul&gt;</span></span>
<span class="line"><span>&lt;/nav&gt;</span></span>
<span class="line"><span>.pagination {</span></span>
<span class="line"><span>    width: 100%;</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    justify-content: space-between;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    border: 4px solid #dedbdb;</span></span>
<span class="line"><span>    padding: 14px 24px;</span></span>
<span class="line"><span>    border-radius: 10rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination li {</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination li:not(.prev):not(.next) a,</span></span>
<span class="line"><span>.pagination li span {</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    width: 48px;</span></span>
<span class="line"><span>    height: 48px;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    border-radius: 50%;</span></span>
<span class="line"><span>    background-color: #dedbdb;</span></span>
<span class="line"><span>    text-decoration: none;</span></span>
<span class="line"><span>    color: #231f1f;</span></span>
<span class="line"><span>    font-size: 22px;</span></span>
<span class="line"><span>    transition: all 0.2s ease;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination li:not(.prev):not(.next) a:hover {</span></span>
<span class="line"><span>    background-color: #008fff;</span></span>
<span class="line"><span>    color: #fff;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .active span {</span></span>
<span class="line"><span>    background-color: #008fff;</span></span>
<span class="line"><span>    color: #fff;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .prev a,</span></span>
<span class="line"><span>.pagination .next a {</span></span>
<span class="line"><span>    font-size: 40px;</span></span>
<span class="line"><span>    color: #dedbdb;</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    position: relative;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .prev a {</span></span>
<span class="line"><span>    padding-right: 24px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .next a {</span></span>
<span class="line"><span>    padding-left: 24px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .prev a::before,</span></span>
<span class="line"><span>.pagination .next a::before {</span></span>
<span class="line"><span>    content: &quot;&quot;;</span></span>
<span class="line"><span>    position: absolute;</span></span>
<span class="line"><span>    top: -18px;</span></span>
<span class="line"><span>    bottom: -20px;</span></span>
<span class="line"><span>    width: 4px;</span></span>
<span class="line"><span>    background-color: currentColor;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .prev a::before {</span></span>
<span class="line"><span>    right: 0;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .next a::before {</span></span>
<span class="line"><span>    left: 0;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .prev a:hover,</span></span>
<span class="line"><span>.pagination .next a:hover {</span></span>
<span class="line"><span>    color: #008fff;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination .prev a:hover::before,</span></span>
<span class="line"><span>.pagination .next a:hover::before {</span></span>
<span class="line"><span>    color: #dedbdb;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination li:not(.prev):not(.next) a,</span></span>
<span class="line"><span>.pagination li:not(.active) span {</span></span>
<span class="line"><span>    display: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.pagination__container {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 540px) {</span></span>
<span class="line"><span>    .pagination li.first a,</span></span>
<span class="line"><span>    .pagination li.last a,</span></span>
<span class="line"><span>    .pagination li.more span {</span></span>
<span class="line"><span>        display: inline-flex !important;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 768px) {</span></span>
<span class="line"><span>    .pagination li a,</span></span>
<span class="line"><span>    .pagination li span {</span></span>
<span class="line"><span>         display: inline-flex !important;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eaef1633c72d4cc7a0b0b94b64b53548~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/VwBPGEr" target="_blank" rel="noreferrer">https://codepen.io/airen/full/VwBPGEr</a></p></blockquote><h3 id="侧边栏" tabindex="-1">侧边栏 <a class="header-anchor" href="#侧边栏" aria-label="Permalink to &quot;侧边栏&quot;">​</a></h3><p>在一些 Web 应用的侧边栏（比如 Gitlab 的侧边栏、Facebook 聊天界面，其实 Web 版本的微信群也有点类似于 Facebook 聊天室）像下图这样的模式：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a91bcb7022ee474791ff40c7a4aa77f5~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>像上图这样的效果，我们可以使用 CSS 容器查询来实现。当有足够的空间时，侧边栏的列表会展开，如果没有足够空间时，侧边栏只会展示 Icon 图标（或用户头像）。我们来实现一个像下图的布局效果。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f32211f443d64fb6ae129e7fdb2f88bc~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;div class=&quot;wrapper&quot;&gt;</span></span>
<span class="line"><span>    &lt;aside&gt;</span></span>
<span class="line"><span>        &lt;h1 class=&quot;logo&quot;&gt;</span></span>
<span class="line"><span>            &lt;svg width=&quot;36px&quot; height=&quot;36px&quot; viewBox=&quot;0 0 210 210&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; id=&quot;tanuki-logo&quot;&gt;&lt;/svg&gt;</span></span>
<span class="line"><span>            &lt;span&gt;GitLab&lt;/span&gt;</span></span>
<span class="line"><span>        &lt;/h1&gt;</span></span>
<span class="line"><span>        &lt;nav class=&quot;menu&quot;&gt;</span></span>
<span class="line"><span>            &lt;ul&gt;</span></span>
<span class="line"><span>                &lt;li&gt;</span></span>
<span class="line"><span>                    &lt;a href=&quot;#&quot;&gt;</span></span>
<span class="line"><span>                        &lt;svg t=&quot;1638543010000&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;2303&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/svg&gt;</span></span>
<span class="line"><span>                        &lt;span&gt;Home&lt;/span&gt;</span></span>
<span class="line"><span>                    &lt;/a&gt;</span></span>
<span class="line"><span>                &lt;/li&gt;</span></span>
<span class="line"><span>                &lt;!-- 省略其他 li --&gt;</span></span>
<span class="line"><span>            &lt;/ul&gt;</span></span>
<span class="line"><span>        &lt;/nav&gt;</span></span>
<span class="line"><span>        &lt;div class=&quot;profile&quot;&gt;</span></span>
<span class="line"><span>            &lt;img src=&quot;https://www.w3cplus.com/sites/all/themes/w3cplusV2/images/logo.png&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span>            &lt;span&gt;w3cplus&lt;/span&gt;</span></span>
<span class="line"><span>        &lt;/div&gt;</span></span>
<span class="line"><span>    &lt;/aside&gt;</span></span>
<span class="line"><span>    &lt;main&gt;</span></span>
<span class="line"><span>        &lt;div class=&quot;card&quot;&gt;</span></span>
<span class="line"><span>            &lt;img src=&quot;https://picsum.photos/2568/600?random=1&quot; width=&quot;2568&quot; height=&quot;600&quot; alt=&quot;&quot; class=&quot;card__thumbnail&quot; /&gt;</span></span>
<span class="line"><span>            &lt;div class=&quot;card__badge&quot;&gt;Must Try&lt;/div&gt;</span></span>
<span class="line"><span>            &lt;h3 class=&quot;card__title&quot;&gt;Best Brownies in Town&lt;/h3&gt;</span></span>
<span class="line"><span>            &lt;p class=&quot;card__describe&quot;&gt;High quality ingredients and best in-class chef. Light, tender, and easy to make~&lt;/p&gt;</span></span>
<span class="line"><span>            &lt;button class=&quot;card__button&quot;&gt;Order now&lt;/button&gt;</span></span>
<span class="line"><span>       &lt;/div&gt;</span></span>
<span class="line"><span>       &lt;!-- 省略其他 card --&gt;</span></span>
<span class="line"><span>    &lt;/main&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><p>关键的 CSS 代码：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.wrapper {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    grid-template-columns: 0.3fr 1fr;</span></span>
<span class="line"><span>    width: 100vw;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>aside {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    grid-template-rows: min-content auto min-content;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.logo {</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.menu a {</span></span>
<span class="line"><span>    width: 100%;</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    gap: 10px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.profile {</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    gap: 10px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>main {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 20px;</span></span>
<span class="line"><span>    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));</span></span>
<span class="line"><span>    align-items: start;</span></span>
<span class="line"><span>    align-content: start;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 10px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card__thumbnail {</span></span>
<span class="line"><span>    aspect-ratio: 16 / 9;</span></span>
<span class="line"><span>    object-fit: cover;</span></span>
<span class="line"><span>    object-position: center;</span></span>
<span class="line"><span>    border-radius: 24px 24px 0 0;</span></span>
<span class="line"><span>    grid-area: 1 / 1 / 2 / 2;</span></span>
<span class="line"><span>    z-index: 1;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card__badge {</span></span>
<span class="line"><span>    grid-area: 1 / 1 / 2 / 2;</span></span>
<span class="line"><span>    z-index: 2;</span></span>
<span class="line"><span>    align-self: start;</span></span>
<span class="line"><span>    justify-self: start;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card__button {</span></span>
<span class="line"><span>    display: inline-flex;</span></span>
<span class="line"><span>    justify-content: center;</span></span>
<span class="line"><span>    align-items: center;</span></span>
<span class="line"><span>    justify-self: end;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>aside {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>    min-width: 100px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.wrapper {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &lt; 200px) {</span></span>
<span class="line"><span>    .logo span,</span></span>
<span class="line"><span>    .menu span,</span></span>
<span class="line"><span>    .profile span {</span></span>
<span class="line"><span>        display: none;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .menu a {</span></span>
<span class="line"><span>        gap: 0;</span></span>
<span class="line"><span>        justify-content: center;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 760px) and (width &lt; 1024px) {</span></span>
<span class="line"><span>    main {</span></span>
<span class="line"><span>        grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: 240px auto;</span></span>
<span class="line"><span>        grid-template-rows: min-content min-content auto;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;thumbnail title&quot;</span></span>
<span class="line"><span>            &quot;thumbnail describe&quot;</span></span>
<span class="line"><span>            &quot;thumbnail button&quot;;</span></span>
<span class="line"><span>        gap: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card__thumbnail {</span></span>
<span class="line"><span>        grid-area: thumbnail;</span></span>
<span class="line"><span>        aspect-ratio: 1 / 1;</span></span>
<span class="line"><span>        z-index: 1;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card__badge {</span></span>
<span class="line"><span>        grid-area: thumbnail;</span></span>
<span class="line"><span>        z-index: 2;</span></span>
<span class="line"><span>        display: flex;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    .card__describe {</span></span>
<span class="line"><span>        grid-area: describe;</span></span>
<span class="line"><span>        align-self: start;</span></span>
<span class="line"><span>        display: flex;</span></span>
<span class="line"><span>        margin-top: -24px;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card__title {</span></span>
<span class="line"><span>        grid-area: title;</span></span>
<span class="line"><span>        margin-top: 20px;</span></span>
<span class="line"><span>        align-self: start;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    .card__button {</span></span>
<span class="line"><span>        grid-area: button;</span></span>
<span class="line"><span>        align-self: end;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/445f2685103a4a02a4dda5fc50756b1d~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/KKBaroo" target="_blank" rel="noreferrer">https://codepen.io/airen/full/KKBaroo</a></p></blockquote><h2 id="其他容器尺寸大小的查询" tabindex="-1">其他容器尺寸大小的查询 <a class="header-anchor" href="#其他容器尺寸大小的查询" aria-label="Permalink to &quot;其他容器尺寸大小的查询&quot;">​</a></h2><p>我们平时看到的关于容器查询的案例大多数都是查询宽度（<code>width</code>）、最大宽度（<code>max-width</code>）和最小宽度（<code>min-width</code>）、高度（<code>height</code>）、块大小（<code>block-size</code>）和内联尺寸（<code>inline-size</code>）等。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container {</span></span>
<span class="line"><span>    container: info-card / inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container info-card (width &lt; 500px) { </span></span>
<span class="line"><span>    .card { </span></span>
<span class="line"><span>        flex-direction: column; </span></span>
<span class="line"><span>    } </span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>事实上，除了上面提到的之外，还可以查询 <code>aspect-ratio</code> 和 <code>orientation</code> （<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@container#descriptors" target="_blank" rel="noreferrer">MDN上有相关描述</a>），这个就和媒体查询非常的相似了。也就是说，我们除了查询容器的尺寸大小之外，还可以像 CSS 媒体查询一样，查询容器的宽高比、取向等。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>/* CSS 媒体查询 */</span></span>
<span class="line"><span>@media screen (orientation: landscape) { </span></span>
<span class="line"><span>    .card { </span></span>
<span class="line"><span>        /* CSS ... */ </span></span>
<span class="line"><span>    } </span></span>
<span class="line"><span>} </span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* CSS 容器查询 */</span></span>
<span class="line"><span>@container info-card (orientation: landscape) { </span></span>
<span class="line"><span>    .card { </span></span>
<span class="line"><span>        /* CSS ... */ </span></span>
<span class="line"><span>    } </span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container info-card (aspect-ratio: 3/2) { </span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        /* CSS ... */</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>比如下面这个示例：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70e70650a1b44224b56b3564d2557735~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Dem 地址：<a href="https://codepen.io/airen/full/NWBpRYE" target="_blank" rel="noreferrer">https://codepen.io/airen/full/NWBpRYE</a></p></blockquote><p>关键代码如下：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container {</span></span>
<span class="line"><span>    container-type: size;</span></span>
<span class="line"><span>    container-name: info-card;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    grid-template-columns: .3fr minmax(0, 1fr);</span></span>
<span class="line"><span>    gap: clamp(.25rem, 5cqw + .5rem, 1.25rem) clamp(1rem, 5cqh + 1rem, 1.5rem);</span></span>
<span class="line"><span>    grid-template-rows: min-content minmax(0, 1fr);</span></span>
<span class="line"><span>    grid-template-areas: </span></span>
<span class="line"><span>        &quot;figure  title&quot;</span></span>
<span class="line"><span>        &quot;figure  des&quot;;</span></span>
<span class="line"><span>    border-radius: clamp(2px, 3cqw + 2px, 8px);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card figure {</span></span>
<span class="line"><span>    grid-area: figure;</span></span>
<span class="line"><span>    border-radius: clamp(2px, 3cqw + 2px, 8px) 0 0 clamp(2px, 3cqw + 2px, 8px);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card h3 {</span></span>
<span class="line"><span>    grid-area: title;</span></span>
<span class="line"><span>    margin-top: 1rem;</span></span>
<span class="line"><span>    padding-right: 1rem;</span></span>
<span class="line"><span>    font-size: clamp(1.25rem, 9cqi + 1.25rem, 1.5rem);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card p {</span></span>
<span class="line"><span>    grid-area: des;</span></span>
<span class="line"><span>    padding: 0 1rem 1rem 0;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container info-card (max-aspect-ratio: 3/2) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: auto;</span></span>
<span class="line"><span>        grid-template-rows: auto min-content minmax(0, 1fr);</span></span>
<span class="line"><span>        grid-template-areas: </span></span>
<span class="line"><span>            &quot;figure&quot;</span></span>
<span class="line"><span>            &quot;title&quot;</span></span>
<span class="line"><span>            &quot;des&quot;;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        border-radius: clamp(2px, 3cqw + 2px, 8px) clamp(2px, 3cqw + 2px, 8px) 0 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card h3 {</span></span>
<span class="line"><span>        margin-top: 0;</span></span>
<span class="line"><span>        padding:  0 1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card p {</span></span>
<span class="line"><span>        padding: 0 1rem 1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br></div></div><blockquote><p>甚至有一天，CSS 容器查询和 CSS 媒体查询一样，除了能查询上面提到的之外，也可以像 CSS 媒体查询一样，查询用户的偏好设置等！</p></blockquote><h2 id="容器查询单位" tabindex="-1">容器查询单位 <a class="header-anchor" href="#容器查询单位" aria-label="Permalink to &quot;容器查询单位&quot;">​</a></h2><p>你知道吗？随着容器查询的出现，CSS 值单位也新增了<strong>容器查询单位</strong>。它的工作原理和视窗单位，比如 <code>vw</code> 、<code>vh</code> 、<code>vmin</code> 、<code>vmax</code> 等非常相似。不同的是，<strong>视窗单位是相对于浏览器视窗尺寸计算；容器查询单位是相对于查询容器尺寸计算</strong> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ac1159cf2f44ee7952242d709c23213~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><ul><li><code>1cqw</code> 等于查询容器宽度（<code>width</code>）的 <code>1%</code>；</li><li><code>1cqh</code> 等于查询容器高度（<code>height</code>）的 <code>1%</code>；</li><li><code>1cqi</code> 等于查询容器内联大小（<code>inline-size</code>）的 <code>1%</code>；</li><li><code>1cqb</code> 等于查询容器块大小（<code>block-size</code>）的 <code>1%</code>；</li><li><code>1cqmin</code> 等于 <code>1cqi</code> 或 <code>1cqb</code> 中较小的一个值；</li><li><code>1cqmax</code> 等于 <code>1cqi</code> 或 <code>1cqb</code> 中较大的一个值。</li></ul><p>容器查询单位出现之后，可以帮助我们在处理组件内元素样式，比如 <code>font-size</code>、 <code>padding</code> 和 <code>margin</code> 等，节省很多的精力和时间。例如，我们可以使用容器查询单位代替手动增加字体大小。</p><p>容器查询单位还没有的时候，我们一般会像下面这样改写卡片组件标题的 <code>font-size</code> ：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__title {</span></span>
<span class="line"><span>    font-size: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 容器宽度大于 400px */</span></span>
<span class="line"><span>@container (width &gt; 400px) {</span></span>
<span class="line"><span>    .card__title {</span></span>
<span class="line"><span>        font-size: 1.15rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 容器宽度大于 600px */</span></span>
<span class="line"><span>@container (width &gt; 600px) {</span></span>
<span class="line"><span>    .card__title {</span></span>
<span class="line"><span>        font-size: 1.25rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 容器宽度大于 800px */</span></span>
<span class="line"><span>@container (width &gt; 800px){</span></span>
<span class="line"><span>    .card__title {</span></span>
<span class="line"><span>        font-size: 2rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>有了容器查询单位之后，同样是给卡片组件标题设置 <code>font-size</code> ，只需要一行代码即可：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__title {</span></span>
<span class="line"><span>    font-size: clamp(1rem, 3cqw, 2rem);</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>当然，我们也可以像前面课程中介绍 <code>vw</code> 设置 <code>font-size</code> 的方法一样，使用容器查询单位来给卡片组件标题设置<code>font-size</code>：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>/* 视窗单位设置 font-size */</span></span>
<span class="line"><span>.card__title {</span></span>
<span class="line"><span>    font-size: clamp(1.2rem, 5vw + 1rem, 3rem);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 容器查询单位设置 font-size */</span></span>
<span class="line"><span>.card__title {</span></span>
<span class="line"><span>    font-size: clamp(1.2rem, 5cqi + 1rem, 3rem);</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2c118fabbe2405e80d87c753319a99a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>注意，早期的容器查询单位原型是 <code>q*</code> 而不是现在的 <code>cq*</code> ，所以可能会在早期的一些容器查询单位的 Demo 中看到类似 <code>qw</code> 、<code>qh</code> 单位，而且很有可能不能正常运行。</p></blockquote><p>接下来看一个容器查询单位的真实案例，这个案例是 <a href="https://codepen.io/scottkellum" target="_blank" rel="noreferrer">@Scott Kellum</a> 在 <a href="https://codepen.io/scottkellum/full/jOwmOZE" target="_blank" rel="noreferrer">Codepen 上提供的</a>，我直接 Fork 了一份出来：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab59d7f46124dd6b829331e90bff594~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/rNryMVg" target="_blank" rel="noreferrer">https://codepen.io/airen/full/rNryMVg</a></p></blockquote><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>html {</span></span>
<span class="line"><span>    font-size: min( 120%, 5vw);</span></span>
<span class="line"><span>    line-height: 1.25;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>html,</span></span>
<span class="line"><span>main,</span></span>
<span class="line"><span>article {</span></span>
<span class="line"><span>  container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 容器查询单位*/</span></span>
<span class="line"><span>h1,</span></span>
<span class="line"><span>.product-price {</span></span>
<span class="line"><span>    font-size: max(1.25rem, 12cqi - 1rem);</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>上面示例展示的都是容器查询单位运用于 <code>font-size</code> 的属性上，其实容器查询单位和其他长度（<code>&lt;length&gt;</code>）类似，只要是可以接受 <code>&lt;length&gt;</code> 值的 CSS 属性都可以使用容器查询单位，比如我们熟悉的 <code>font-size</code> 、<code>margin</code> 、<code>padding</code> 、<code>border-width</code> 、<code>background-size</code> 、<code>inset</code> 以及 <code>gap</code> 等。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card-grid {</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>    container-name: card-grid;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card-grid__inner {</span></span>
<span class="line"><span>    --cols: 4;</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 2cqw;</span></span>
<span class="line"><span>    grid-template-columns: repeat(var(--cols), 1fr);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container card-grid (width &lt; 900px) {</span></span>
<span class="line"><span>    .card-grid__inner {</span></span>
<span class="line"><span>        --cols: 3;</span></span>
<span class="line"><span>        gap: 3cqw;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container card-grid (width &lt; 600px) {</span></span>
<span class="line"><span>    .card-grid__inner {</span></span>
<span class="line"><span>        --cols: 2;</span></span>
<span class="line"><span>        gap: 4cqw;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card {</span></span>
<span class="line"><span>    container-type: size;</span></span>
<span class="line"><span>    container-name: card;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card__inner {</span></span>
<span class="line"><span>    font-size: 5cqw;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><h2 id="容器查询的未来-样式查询" tabindex="-1">容器查询的未来：样式查询 <a class="header-anchor" href="#容器查询的未来-样式查询" aria-label="Permalink to &quot;容器查询的未来：样式查询&quot;">​</a></h2><p>你现在知道容器查询是怎么一回事了，但我想你可能还没听说过，在 CSS 中除了媒体查询、容器查询之外，现在又新增了一个 <strong>样式查询（Style Queries）</strong> 。</p><blockquote><p><a href="https://drafts.csswg.org/css-contain-3/" target="_blank" rel="noreferrer">CSS Containment Module Level 3规范</a> （当前还只是工作草案）定义了样式查询。</p></blockquote><p>就在最近，Chrome 团队发布了对<strong>样式查询</strong>的实验性支持。简而言之，<strong>样式查询允许我们查询容器的 CSS 属性或 CSS 自定义属性（CSS 变量）</strong> 。</p><p>样式查询仍然处于实验阶段，目前仅在 <a href="https://www.google.com/intl/en_sg/chrome/canary/" target="_blank" rel="noreferrer">Chrome Canary</a> 中实现。要测试它们，请访问 <code>chrome://flags</code> 并激活“Experimental Web Platform features”，将其设置为 <code>Enabled</code> 状态：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47a836af66f546ca94e5b2cee223864a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>这样你就可以使用样式查询：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>@container style(border-color: lightblue) {</span></span>
<span class="line"><span>    button {</span></span>
<span class="line"><span>        border-color: lightblue;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>理想情况下，上述代码应该可以工作，但是 Chrome Canary 中，当前的样式查询原型仅限于 CSS 变量。样式查询有望在 <a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/ACL23q_nbK0/m/PaNJ81_qDAAJ?pli=1" target="_blank" rel="noreferrer">Chrome M111</a> 中发布。</p><p>现在，我们可以检查变量 <code>——boxed: true</code> 是否被添加到容器中，如果是，则可以基于此更改子元素的样式。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container {</span></span>
<span class="line"><span>    --boxed: true;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container style(--boxed: true) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        /* CSS ... */</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>请看下图。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20d623b746c742deba944b0dbdcca01c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>请注意，容器查询和样式查询的主要区别在于，<strong>容器查询用于查询容器尺寸大小，样式查询用于查询容器样式</strong> 。你可能会感到好奇，既然可以查询容器尺寸大小了，为什么还需要查询容器样式呢？</p><p>其实，在容器查询中，查询容器尺寸大小，允许我们根据组件的父容器（或祖先容器）的尺寸来控制组件样式，这非常有用。只不过，在某些情况下，我们可能不需要去查询容器尺寸大小，相反的是，我们想要查询容器的计算样式。那么，在这种情况之下，样式查询就会很有用处。</p><p>还是拿卡片组件 <code>Card</code> 为例吧：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3df7e48361e489ebb91680fc9e78453~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>我们知道，使用容器查询可以很容易实现上图所示的效果：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;div class=&quot;card__container&quot;&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;card&quot;&gt;</span></span>
<span class="line"><span>        &lt;figure&gt;</span></span>
<span class="line"><span>            &lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;</span></span>
<span class="line"><span>        &lt;/figure&gt;</span></span>
<span class="line"><span>        &lt;h3&gt;Card Ttitle &lt;/h3&gt;</span></span>
<span class="line"><span>        &lt;p&gt;Card Description&lt;/p&gt;</span></span>
<span class="line"><span>    &lt;/div&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>关键 CSS 代码：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    grid-template-rows: 300px min-content minmax(0, 1fr);</span></span>
<span class="line"><span>    grid-template-areas: </span></span>
<span class="line"><span>        &quot;thumbnail&quot;</span></span>
<span class="line"><span>        &quot;title&quot;</span></span>
<span class="line"><span>        &quot;description&quot;;</span></span>
<span class="line"><span>    gap: 2cqh;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card figure {</span></span>
<span class="line"><span>    grid-area: thumbnail;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card h3 {</span></span>
<span class="line"><span>    grid-area: title;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card p {</span></span>
<span class="line"><span>    grid-area: description;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card figure {</span></span>
<span class="line"><span>    border-radius: 6px 6px 0 0;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card &gt; *:not(figure) {</span></span>
<span class="line"><span>    padding: 0 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card h3 {</span></span>
<span class="line"><span>    font-size: clamp(1.25rem, 3cqw + 1.25rem, 1.5rem);</span></span>
<span class="line"><span>    font-weight: 900;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card p {</span></span>
<span class="line"><span>    font-size: 95%;</span></span>
<span class="line"><span>    color: #999;</span></span>
<span class="line"><span>    padding-bottom: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 容器查询 */</span></span>
<span class="line"><span>.card__container{</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 400px) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: .4fr minmax(0, 1fr) 1rem;</span></span>
<span class="line"><span>        grid-template-rows: 1rem min-content minmax(0, 1fr) 1rem;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;thumbnail    .            .&quot;</span></span>
<span class="line"><span>            &quot;thumbnail    title        .&quot;</span></span>
<span class="line"><span>            &quot;thumbnail    description  .&quot;</span></span>
<span class="line"><span>            &quot;thumbnail    .            .&quot;;</span></span>
<span class="line"><span>        gap: .25rem 1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        border-radius: 6px 0 0 6px;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card &gt; *:not(figure) {</span></span>
<span class="line"><span>        padding: 0;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 768px) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        grid-template-columns: auto;</span></span>
<span class="line"><span>        grid-template-rows: min-content  auto auto min-content;</span></span>
<span class="line"><span>        grid-template-areas:</span></span>
<span class="line"><span>            &quot;.&quot;</span></span>
<span class="line"><span>            &quot;title&quot;</span></span>
<span class="line"><span>            &quot;description&quot;</span></span>
<span class="line"><span>            &quot;.&quot;;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card figure {</span></span>
<span class="line"><span>        grid-area: 1 / 1 / -1 / -1;</span></span>
<span class="line"><span>        max-height: 380px;</span></span>
<span class="line"><span>        border-radius: 0;</span></span>
<span class="line"><span>        position: relative;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card figure::after {</span></span>
<span class="line"><span>        content: &quot;&quot;;</span></span>
<span class="line"><span>        background: darkorchid;</span></span>
<span class="line"><span>        position: absolute;</span></span>
<span class="line"><span>        inset: 0;</span></span>
<span class="line"><span>        width: 100%;</span></span>
<span class="line"><span>        height: 100%;</span></span>
<span class="line"><span>        opacity: 0.8;</span></span>
<span class="line"><span>        mix-blend-mode: screen;</span></span>
<span class="line"><span>   }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .card &gt; *:not(figure) {</span></span>
<span class="line"><span>        place-self: center;</span></span>
<span class="line"><span>        z-index: 2;</span></span>
<span class="line"><span>        text-shadow: 1px 0px 1px rgb(0 0 0 / 25%);</span></span>
<span class="line"><span>        text-align: center;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Page Layout */</span></span>
<span class="line"><span>.featured {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    padding: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.featured .card__container {</span></span>
<span class="line"><span>    grid-area: 1 / 1 / -1 / -1; </span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card--lists {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    gap: 4cqw;</span></span>
<span class="line"><span>    padding: 1rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* 媒体查询 */</span></span>
<span class="line"><span>@media only screen and (min-width: 768px) {</span></span>
<span class="line"><span>    .card--lists {</span></span>
<span class="line"><span>        grid-template-columns: repeat(2, minmax(0, 1fr));</span></span>
<span class="line"><span>        gap: 3cqw;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@media only screen and (min-width: 1024px) {</span></span>
<span class="line"><span>    .card--lists {</span></span>
<span class="line"><span>        grid-template-columns: repeat(auto-fit, minmax(min(100% - 2rem, 420px), 1fr));</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/629754c9cf3d423a93a2ead0e710d2b4~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/LYBWWWZ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/LYBWWWZ</a></p></blockquote><p>我们在上面的示例基础上加入样式查询，比如：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container{</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>    --horizontal: true;</span></span>
<span class="line"><span>    --featured: true;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 400px) and style(--horizontal:true) {</span></span>
<span class="line"><span>    /* Horizontal Style */</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container (width &gt; 768px) and style(--featured: true) {</span></span>
<span class="line"><span>    /* Featured Style */</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>卡片组件同时查询了容器尺寸大小和容器样式：</p><ul><li>容器宽度大于 <code>400px</code> ，并且容器中的 <code>--horizontal</code> 为 <code>true</code> 时，卡片组件会有水平排列的样式；</li><li>容器宽度大于 <code>768px</code> ，并且容器中的 <code>--featured</code> 为 <code>true</code> 时，卡片组件会有 Featured 样式网格。</li></ul><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bad77b85ce7244589967b9cff405f842~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/JjBWNPN" target="_blank" rel="noreferrer">https://codepen.io/airen/full/JjBWNPN</a> （请使用 Chrome Canary 查看 ）</p></blockquote><p>如果你在 <code>.card__container</code> 中将 <code>--featured</code> 设置为 <code>false</code> ，你会发现卡片组件的 Featured 效果永远不会呈现，即使容器宽度大于 <code>768px</code> 也是如此：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container{</span></span>
<span class="line"><span>    container-type: inline-size;</span></span>
<span class="line"><span>    --horizontal: true;</span></span>
<span class="line"><span>    --featured: false;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b00300e84bba4508becaaad804280b50~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>上面示例是容器查询和样式查询组合在一起的。你可能还没有体会到样式查询所起的作用。那我们来看两个纯样式查询的示例。比如下图这个布局效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a313b06ad07f45a387f0ec4aace10310~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;div class=&quot;avatars__container&quot;&gt;</span></span>
<span class="line"><span>    &lt;ul class=&quot;avatars&quot;&gt;</span></span>
<span class="line"><span>        &lt;li class=&quot;avatar&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;</span></span>
<span class="line"><span>        &lt;!-- 省略其他 li --&gt;</span></span>
<span class="line"><span>    &lt;/ul&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span>
<span class="line"><span>.avatars__container {</span></span>
<span class="line"><span>  container-name: avatar;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.avatars {</span></span>
<span class="line"><span>    display: flex;</span></span>
<span class="line"><span>    flex-wrap: wrap;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Default Style */</span></span>
<span class="line"><span>@container avatar style(--appearance: default) {</span></span>
<span class="line"><span>    .avatars {</span></span>
<span class="line"><span>        gap: 1cqw;</span></span>
<span class="line"><span>        justify-content: space-evenly;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .avatar {</span></span>
<span class="line"><span>        --size: 3.5rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Stack Style */</span></span>
<span class="line"><span>@container avatar style(--appearance: stack) {</span></span>
<span class="line"><span>    .avatar {</span></span>
<span class="line"><span>        --size: 4.25rem;</span></span>
<span class="line"><span>        border: 4px solid #fff;</span></span>
<span class="line"><span>        padding: .2rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    .avatar + .avatar {</span></span>
<span class="line"><span>        margin-inline-start: -1rem;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>/* Grid Style */</span></span>
<span class="line"><span>@container avatar style(--appearance: grid) {</span></span>
<span class="line"><span>    .avatars {</span></span>
<span class="line"><span>        display: grid;</span></span>
<span class="line"><span>        grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));</span></span>
<span class="line"><span>        gap: 5cqw;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>     .avatar {</span></span>
<span class="line"><span>         --size: 100%;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ebe6ef39a73d473281bb306eda6661d0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/abjJWeK" target="_blank" rel="noreferrer">https://codepen.io/airen/full/abjJWeK</a> （请使用 Chrome Canary 查看 ）</p></blockquote><p>你可能从上面的示例中体验出样式查询所起的作用了。其实它用于主题切换（比如暗黑模式）、多语言 Web 网站等，会起更大的作用。比如下面这个卡片组件：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b92927579bc7436e9b929903d01eb4c4~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/bGjqRrg" target="_blank" rel="noreferrer">https://codepen.io/airen/full/bGjqRrg</a> （请使用 Chrome Canary 查看 ）</p></blockquote><p>我们在 《<a href="https://juejin.cn/book/7161370789680250917/section/7161625525763440647" target="_blank" rel="noreferrer">22 | Web 中的向左向右：Flexbox 和 Grid 布局中的 LTR 与 RTL</a>》和《<a href="https://juejin.cn/book/7161370789680250917/section/7161625415935590436" target="_blank" rel="noreferrer">23 | Web 中的向左向右：Web 布局中 LTR 切换到 RTL 常见错误</a>》有详细介绍过如何实现上图这样的多语言 Web 组件，所以这里就不再重复阐述。我们直接来看，有了样式查询之后，它是如何实现的？</p><p>先上 HTML 结构：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;div class=&quot;card__container&quot; dir=&quot;ltr&quot; lang=&quot;zh-Hans&quot;&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;card&quot;&gt;</span></span>
<span class="line"><span>        &lt;h3&gt;现代 Web 布局&lt;/h3&gt;</span></span>
<span class="line"><span>        &lt;p&gt;现代 Web 布局中的最后一节课，下一代响应式 Web 设计中的容器响应，就是容器查询！&lt;/p&gt;</span></span>
<span class="line"><span>        &lt;span&gt;&lt;svg t=&quot;1673340802729&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;2667&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/svg&gt;&lt;/span&gt;</span></span>
<span class="line"><span>    &lt;/div&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>&lt;div class=&quot;card__container&quot; dir=&quot;rtl&quot; lang=&quot;ar&quot;&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;card&quot;&gt;</span></span>
<span class="line"><span>        &lt;h3&gt;تصميم Web الحديثة&lt;/h3&gt;</span></span>
<span class="line"><span>        &lt;p&gt;الدرس الأخير في تصميم Web الحديثة، والجيل التالي من استجابة الحاويات في تصميم Web، هو البحث عن الحاويات!&lt;/p&gt;</span></span>
<span class="line"><span>        &lt;span&gt;&lt;svg t=&quot;1673340802729&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;2667&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/svg&gt;&lt;/span&gt;</span></span>
<span class="line"><span>    &lt;/div&gt;</span></span>
<span class="line"><span> &lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>对于 LTR 的布局，我们可以这样写：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card {</span></span>
<span class="line"><span>    --bg-angle: to right;</span></span>
<span class="line"><span>    --bg: linear-gradient(var(--bg-angle), #5521c3, #5893eb);</span></span>
<span class="line"><span>    background: var(--bg, lightgrey);</span></span>
<span class="line"><span>    border-radius: 12px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card {</span></span>
<span class="line"><span>    display: grid;</span></span>
<span class="line"><span>    grid-template-columns: minmax(0, 1fr) max-content;</span></span>
<span class="line"><span>    grid-template-areas:</span></span>
<span class="line"><span>        &quot;title       icon&quot;</span></span>
<span class="line"><span>        &quot;description icon&quot;;</span></span>
<span class="line"><span>    gap: .5rem;</span></span>
<span class="line"><span>    padding: 18px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card h3 {</span></span>
<span class="line"><span>    grid-area: title;</span></span>
<span class="line"><span>    font-size: clamp(1.25rem, 5cqw + 1.5rem, 1.875rem);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card p {</span></span>
<span class="line"><span>    grid-area: description;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card span {</span></span>
<span class="line"><span>    grid-area: icon;</span></span>
<span class="line"><span>    place-self: center;</span></span>
<span class="line"><span>    font-size: 3rem;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>.card svg {</span></span>
<span class="line"><span>    display: block;</span></span>
<span class="line"><span>    width: 1em;</span></span>
<span class="line"><span>    height: 2em;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><p>RTL 和 LTR 不同之处是，渐变背景颜色刚好相反，另外 ICON 图标是带有方向性的，因此在 RTL 布局下，需要对其做一个水平镜像处理。我们使用样式查询来完成它：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__container[dir=&quot;rtl&quot;] {</span></span>
<span class="line"><span>    --dir: rtl;</span></span>
<span class="line"><span>    direction: var(--dir);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>@container style(--dir: rtl) {</span></span>
<span class="line"><span>    .card {</span></span>
<span class="line"><span>        --bg-angle: to left; /* 改变渐变方向 */</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>​</span></span>
<span class="line"><span>    svg {</span></span>
<span class="line"><span>        transform: scaleX(-1); /* 水平镜像 */</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>就这样搞定。你可以想想，如果没有样式查询，会是如何实现？它们有什么样的差异？这两个问题的答案就留给大家自己去寻找和思考了！</p><h2 id="总结" tabindex="-1">总结 <a class="header-anchor" href="#总结" aria-label="Permalink to &quot;总结&quot;">​</a></h2><p>响应式 Web 设计已经将 Web 带到了今天人们所能接触到的每一个连接的屏幕上。Web 设计师和创意开发者用创造性的思维、大胆的想法和某种无畏的精神探索、测试和迭代他们的想法，使在线体验更有吸引力、更容易访问和更智能，推动了设计方法的发展。就好比这里所提到的组件驱动式 Web 设计。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8114cae1efe94c00a574c4605fc0b410~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>组件驱动式 Web 设计的到来或者说 CSS 容器查询、样式查询等特性的出现，这些先进的特性使我们有机会从页面布局、全局样式和用户样式中孤立组件样式，从而实现更具弹性的响应式设计。这意味着你现在可以使用基于页面的媒体查询设计宏观布局，包括多屏或折叠屏的细微差异；同时使用基于容器查询给组件设计做微观上布局，并添加基于用户偏好的媒体查询，来实现基于用户的独特偏好和需求的定制化体验。</p><p>如果我们将这些组件驱动的功能纳入设计系统，并从整体上改变我们对待 Web 设计的方式，我们就可以利用这些功能以及更多的功能来改善每一个登陆你网站的访问者的用户体验。为用户提供真正个性化的体验，提高参与度和转化率，并最终提高用户对你的品牌的感知。</p><p>我们不再是为用户群体设计。我们对 &quot;受众&quot;一词的理解将发生变化，因为内容和体验将为一个人而不是许多人，受众变得高度集中。 组件驱动的响应式 Web 设计将使 Web 真正的可移植，并能适应甚至还没有发明的设备。与其在今天的技术范围内追赶和设计，我们将只为用户设计。</p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-label="Permalink to &quot;Contributors&quot;">​</a></h2><div><section class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16m.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995c0-1.224-1.47-2.74-3.153-3.145"></path></svg> 作者:<span>Long Mo</span></div><!----><!----><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.485 6.879l1.036 4.144l.997-3.655a.5.5 0 0 1 .964 0l.997 3.655l1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 9.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"></path></svg> 字数统计:<span>16.4k 字</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 20 20" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm2.5 14.5L9 11V4h2v6l3 3z"></path></svg> 阅读时长:<span>73 分钟</span></div></section></div><div class="flex gap-2 items-center"><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank"><img src="https://github.com/Longmo666.png" class="w-8 h-8 rounded-full"></a> Long Mo</div><div class="px-[1.2rem] relative py-[1rem] border-1 border-[var(--vp-c-border)]/[.55] w-full min-h-[32px] border-solid mt-[32px] leading-[24px] rounded-[4px]"><svg style="display:inline-block;" viewBox="0 0 512 512" width="1.2em" height="1.2em" class="absolute top-[1rem] right-[1.2rem]"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512a256 256 0 1 0 0 512m-56.6-199.4c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z"></path></svg><section class="flex flex-col gap-y-[8px] overflow-hidden"><div><span class="font-bold">文章作者：</span><span><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank">Long Mo</a></span></div><div><span class="font-bold">版权声明：</span><span> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noreferrer" target="_blank"> CC BY-NC-SA 4.0 </a> 许可协议。转载请注明来自 <a href="#" rel="noreferrer" target="_blank">Longmo Docs</a></span> ！ </div></section></div></div></div></main><footer class="VPDocFooter" data-v-e512d8d8 data-v-73a75ed6><!--[--><!--]--><div class="edit-info" data-v-73a75ed6><div class="edit-link" data-v-73a75ed6><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/xxx" target="_blank" rel="noreferrer" data-v-73a75ed6><!--[--><span class="vpi-square-pen edit-link-icon" data-v-73a75ed6></span> 在 github 上编辑此页<!--]--></a></div><div class="last-updated" data-v-73a75ed6><p class="VPLastUpdated" data-v-73a75ed6 data-v-28126c9f>上次更新: <time datetime="2024-03-04T16:28:46.000Z" data-v-28126c9f></time></p></div></div><nav class="prev-next" data-v-73a75ed6><div class="pager" data-v-73a75ed6><!----></div><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link next" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/01" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>下一篇</span><span class="title" data-v-73a75ed6>Web 布局技术演进：了解 Web 布局发展史</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-4c760b95 data-v-4f1388a4><div class="container" data-v-4f1388a4><!----><p class="copyright" data-v-4f1388a4>Copyright © 2024-present Longmo</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"css3_lightningcss_index.md\":\"DvrpJ9-C\",\"css3_现代web布局_02.md\":\"NnFPbKjC\",\"css3_postcss_postcss-prefix-selector增加统一作用域.md\":\"BTi7xZ9T\",\"css3_现代web布局_01.md\":\"CSOVLYFa\",\"css3_index.md\":\"gWeubSHW\",\"css3_现代web布局_05.md\":\"XnHgE5qs\",\"css3_现代web布局_07.md\":\"B0JalRYm\",\"electron_electron开发实战_index.md\":\"DlTk4nHM\",\"css3_现代web布局_10.md\":\"QvmMy1qK\",\"css3_现代web布局_03.md\":\"DndCH4AP\",\"css3_现代web布局_22.md\":\"BTcBI1Ar\",\"css3_现代web布局_index.md\":\"BRrTkyN-\",\"react_antd使用踩坑经验汇总_procomponents_index.md\":\"CnA6aYv_\",\"nodejs_change-case更改大小写.md\":\"CtntdOEt\",\"react_react好用的插件_rxjs-hooks.md\":\"CahRrTvr\",\"nodejs_复制移动文件.md\":\"DJvz4Dcu\",\"css3_现代web布局_15.md\":\"CxTdKubj\",\"css3_现代web布局_06.md\":\"DKzKVbHi\",\"guide_axios封装.md\":\"yeyMeLKL\",\"react_react实战_设计模式与最佳实践_服务器端渲染（1）：基本套路.md\":\"Ci9ZteTc\",\"react_react实战_设计模式与最佳实践_react 单元测试.md\":\"ghuW9_Ym\",\"react_react好用的插件_react-to-print.md\":\"DUEXVCMF\",\"css3_现代web布局_12.md\":\"DzvNLnB9\",\"react_react好用的插件_react-load-script.md\":\"DBiqdA1k\",\"electron_electron开发实战_释放前端想象力.md\":\"DjfKiu2P\",\"react_react实战_设计模式与最佳实践_react的设计思想.md\":\"CDFxAnJB\",\"react_react组件库搭建指南_02开发调试.md\":\"C_T24zrV\",\"react_react实战_设计模式与最佳实践_react 的未来（1）： 拥抱异步渲染.md\":\"DDCdfFZA\",\"react_react实战_设计模式与最佳实践_react 状态管理（1）：组件状态.md\":\"CleS-bmU\",\"react_react好用的插件_react-viewer.md\":\"CK92G5ky\",\"electron_electron开发实战_electron应用打包.md\":\"DVihGNUt\",\"react_react好用的插件_index.md\":\"CYvYsgxN\",\"react_react好用的插件_formik-antd.md\":\"BVXoD1vi\",\"react_react实战_设计模式与最佳实践_组件设计模式（2）：高阶组件.md\":\"tcEHCkX9\",\"react_css解决方案_styled-components.md\":\"BdEVJSYP\",\"react_react后台管理系统项目实战_index.md\":\"Cf5Aki5e\",\"react_react好用的插件_floating-ui.md\":\"CJ47U607\",\"react_react好用的插件_js-pinyin.md\":\"CCi7zpiQ\",\"electron_electron开发实战_原生gui.md\":\"CKymHWIE\",\"react_antd使用踩坑经验汇总_tabs选项卡.md\":\"DbBQtB84\",\"react_react好用的插件_immer.md\":\"J3J2rLev\",\"css3_现代web布局_08.md\":\"CKAlv-cw\",\"react_react好用的插件_@ebay_nice-modal-react.md\":\"2t81QhzX\",\"react_react hooks.md\":\"DllmXlwe\",\"react_发布订阅_事件总线.md\":\"DGl0tyUU\",\"react_react组件库搭建指南_03编译打包.md\":\"BSWt83_X\",\"guide_quickstart.md\":\"DNtvLzj7\",\"react_开发一个组件库_如何完善组件单测.md\":\"9v27j5fA\",\"react_慕课网最新react技术栈，实战复杂低代码项目-仿问卷星_index.md\":\"DV2mTP-I\",\"react_ahooks_usewhydidyouupdate.md\":\"DeDGpqMK\",\"react_开发一个组件库_index.md\":\"DFCM9Fyc\",\"react_ahooks_usemutationobserver.md\":\"DopGRhup\",\"react_ahooks_uselocalstoragestate.md\":\"CNKG9DfH\",\"react_如何写出更优雅的 react 组件.md\":\"BNRAsuz5\",\"react_ahooks_useeventlistener.md\":\"C022IGRg\",\"react_ahooks_useloading.md\":\"hmNqPF-b\",\"react_ahooks_usethrottle.md\":\"Cxs7sHDg\",\"react_ahooks_usevirtuallist.md\":\"CbSqBIa_\",\"react_ahooks_index.md\":\"BZgeYQAN\",\"react_ahooks_usethrottleeffect.md\":\"Cu9lbAeN\",\"react_ahooks_useinterval.md\":\"z_JjaRUC\",\"react_ahooks_useinfinitescroll.md\":\"05X3BT3k\",\"react_ahooks_useboolean.md\":\"B9uk9pv1\",\"react_ahooks_usehover.md\":\"CQ90ygMl\",\"react_ahooks_usetoggle.md\":\"Dhg-kOcZ\",\"css3_现代web布局_16.md\":\"DqleGwZV\",\"electron_前端必学的桌面开发：electron_react开发桌面应用_1w多字超详细.md\":\"B4S71t_j\",\"react_index.md\":\"VMykJvDU\",\"react_ahooks_usethrottlefn.md\":\"h86SJGdz\",\"react_ahooks_useurlstate.md\":\"N0NRnJcE\",\"react_ahooks_usetrackedeffect.md\":\"DikGGrmT\",\"react_状态管理_natur.md\":\"CjabmgMv\",\"react_ahooks_useantdtable.md\":\"BRTEfq-4\",\"react_ahooks_userafinterval.md\":\"DbqchCta\",\"react_ahooks_useunmount.md\":\"DKpqgfJ2\",\"getting_index.md\":\"CslhLb_Q\",\"react_ahooks_usepagination.md\":\"BZPuA30r\",\"react_react好用的插件_react-jsx-parse.md\":\"BFws_Jvt\",\"react_ahooks_useprevious.md\":\"DoaMcKL0\",\"react_数据请求的reacthooks库_index.md\":\"BVjU5EHg\",\"nodejs_解压缩.md\":\"B8sDL8Ck\",\"react_开发一个组件库_handlebars模板.md\":\"eFtlYiJE\",\"react_自定义hooks_useasynceffect.md\":\"0TOcgDP8\",\"react_ahooks_usewebsocket.md\":\"BSCnKAhD\",\"css3_现代web布局_09.md\":\"CJg03gvR\",\"react_ahooks_useasynceffect.md\":\"LHnOKcnJ\",\"移动端项目_index.md\":\"BYabTvu-\",\"react_ahooks_usememoizedfn.md\":\"BHTS7A7g\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_index.md\":\"BOXXNcld\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第04章 ts 类易被忽视的重要技能，单件设计模式和相关技能深入.md\":\"CCgSUH_B\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第11章 运用 ts 手写 promise 源码.md\":\"BalHRnKD\",\"react_性能监控_index.md\":\"BLRO71Ft\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第03章 ts类方法代码优化的三大法宝： 函数重载、类方法重载、类构造器重载.md\":\"BS1BYvbm\",\"standard_fatherrc.ts配置文件.md\":\"Dkdjh5--\",\"react_自定义hooks_useexceldownload.md\":\"DGb3CWTU\",\"tools_runjs.md\":\"IzZ9xe5N\",\"tools_自动版本管理和生成changelog.md\":\"Dak6Id3b\",\"react_react实战_设计模式与最佳实践_路由的魔法：react router.md\":\"CZ2pkqmc\",\"tools_依赖镜像地址.md\":\"D5Etjm_v\",\"react_react实战_设计模式与最佳实践_组件设计模式（5）：组合组件.md\":\"D54UFiB5\",\"tools_workspaces核心特性总结.md\":\"CxNbObiL\",\"react_自定义hooks_usegreatasync.md\":\"DRVA9yrK\",\"react_react组件库搭建指南_05标准化发布流程.md\":\"BCCPnMto\",\"react_react实战_设计模式与最佳实践_组件设计模式（1）：聪明组件和傻瓜组件.md\":\"tHZI-Xkb\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第05章 ts继承深入_手写优化底层源码.md\":\"B3EQqYKB\",\"tools_rollup打包.md\":\"tSbCVBX5\",\"tools_webstorm快捷键.md\":\"wTpb7qJx\",\"react_react实战_设计模式与最佳实践_服务器端渲染（2）理解nextjs.md\":\"BqBtpEHC\",\"tools_vscode使用教程.md\":\"CqieXqJ8\",\"react_react最佳实践.md\":\"CG2Xrs5X\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第07章 泛型类_泛型接口_泛型类约束的复杂应用【无比重要的深度技能】.md\":\"CuEcP3SC\",\"react_自定义hooks_useeffectenhanced.md\":\"BSK0VwJa\",\"vue_index.md\":\"OW-QE8NS\",\"react_状态管理_react中的组件通信方案.md\":\"D8VvM0h8\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_index.md\":\"CHFAmRtj\",\"standard_pretty-quick.md\":\"CL9LWL6Z\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_第10章ts声明文件，ts模块.md\":\"BgUWX90K\",\"react_ahooks_usesetstate.md\":\"jYidiqGI\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第06章 ts高频使用技能： 类型断言、类型守卫、自定义守卫_ 多态_类型守卫组合应用.md\":\"DTiCfWrY\",\"standard_typings.d.ts.md\":\"COgkopwu\",\"react_react实战_设计模式与最佳实践_组件设计模式（4）：提供者模式.md\":\"CpJkLsBD\",\"typescript_axios_index.md\":\"CjiV2R0j\",\"css3_现代web布局_23.md\":\"DtcX9bTS\",\"electron_electron开发实战_app特性.md\":\"CCGKgh2J\",\"tools_常用命令.md\":\"BCECAPPN\",\"react_ahooks_useupdateeffect.md\":\"B8UnIDT1\",\"tools_npm镜像源管理工具.md\":\"BQvl6-cK\",\"react_自定义hooks_index.md\":\"TbSBlD7i\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第15章 js 原型_复杂原型继承 【查漏补缺】.md\":\"Bym60KVf\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第12章整合vue3手写高水准大厂的ts版vuex4源码.md\":\"Cb3ALa6o\",\"react_css解决方案_css_module.md\":\"kmxgfb6l\",\"css3_现代web布局_04.md\":\"qxIAivzd\",\"react_ahooks_useraftimeout.md\":\"zZ6X2MGp\",\"react_自定义hooks_usecopy.md\":\"B_vVrQah\",\"react_useform.md\":\"D7K5ezD8\",\"css3_现代web布局_27.md\":\"DVEkZdZW\",\"react_状态管理_valtio.md\":\"CXPGtt95\",\"typescript_tsup如何使用.md\":\"CHCfoXjX\",\"react_ahooks_usecookiestate.md\":\"CdRty31d\",\"tools_node各类命令.md\":\"Dp8hvkZX\",\"electron_electron开发实战_electron优化白屏.md\":\"TluuIOV8\",\"css3_现代web布局_24.md\":\"BTAj5AxQ\",\"css3_现代web布局_13.md\":\"BvIlMTco\",\"css3_现代web布局_14.md\":\"CXYZfM8r\",\"react_antd使用踩坑经验汇总_antdtable表格.md\":\"DJY5Mvdl\",\"guide_babel.md\":\"DTbGDSVq\",\"react_状态管理_zustand翻译文档.md\":\"D72s6MxU\",\"guide_index.md\":\"zNzT7elx\",\"tools_资源导航.md\":\"ByR0zpON\",\"react_antd使用踩坑经验汇总_menu菜单.md\":\"CUT3snoK\",\"tools_pnpm多包项目.md\":\"B5SWK1rS\",\"guide_webpack插件.md\":\"RycubFW9\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第02章 全栈思维全面深度掌握 ts 类.md\":\"DT7QMqkY\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第10章 从装饰器应用，底层 js 到 仿 nestjs实战，路由器底层复杂泛型.md\":\"D8kaCtfy\",\"electron_electron开发实战_开发一个简单版的番茄钟.md\":\"CrvCihNB\",\"react_ahooks_useclickaway.md\":\"CZiIOkBS\",\"index.md\":\"C-4ajOyn\",\"react_自定义hooks_useinterval.md\":\"CL7txl3c\",\"nodejs_请求工具类.md\":\"pJv1vv26\",\"react_ahooks_usedebouncefn.md\":\"DoBqhrGU\",\"getting_why.md\":\"B0La2IDF\",\"vue_vue2打包优化.md\":\"o7QF6PW3\",\"nodejs_globby.md\":\"CTH274g9\",\"standard_tsconfig.json.md\":\"CFCzGYxu\",\"react_reactrouter.md\":\"B9PtxEJ9\",\"typescript_ts-challenge.md\":\"CQjhG-Mq\",\"css3_现代web布局_18.md\":\"DbKppEVn\",\"react_ahooks_usedebounce.md\":\"DRqZkoSI\",\"react_自定义hooks_useintersection.md\":\"Bvd3uAWW\",\"nodejs_cli工具_index.md\":\"CGwLSUZ5\",\"react_react实战_设计模式与最佳实践_index.md\":\"C8mvV9MI\",\"tools_规范git代码提交信息.md\":\"BASOsPqX\",\"tools_windows测试ip端口.md\":\"DG6x0Mw8\",\"electron_electron开发实战_使用nodejs调用原生模块.md\":\"CRvmiRGG\",\"nodejs_kill-port跨平台解决端口占用问题.md\":\"BEoOmVOA\",\"css3_现代web布局_28.md\":\"jsAdcmE1\",\"react_react实战_设计模式与最佳实践_组件实践（1）：如何定义清晰可维护的接口.md\":\"C9ky0LxI\",\"react_react实战_设计模式与最佳实践_react 的未来（3）：函数化的 hooks.md\":\"CFPGDH01\",\"react_react组件库搭建指南_index.md\":\"DavlhH-3\",\"react_react避坑指南_usecallback_usememo.md\":\"DBJVYTaL\",\"standard_prettier.md\":\"B8zmNcDZ\",\"react_react实战_设计模式与最佳实践_组件设计模式（3）：render props 模式.md\":\"J6wo2neN\",\"standard_git提交规范.md\":\"BY6vFgPF\",\"css3_现代web布局_26.md\":\"BlwKd9DD\",\"react_redux.md\":\"BR83V68G\",\"nodejs_fs-extra文件系统扩展.md\":\"BeGbM1-y\",\"react_react组件库搭建指南_06dumi2.x的使用.md\":\"BovenX8E\",\"tools_github常用技巧.md\":\"DCwuF17j\",\"electron_数据持久缓存方案_electron-store.md\":\"6LHFkhuG\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】.md\":\"BvOBMPMd\",\"nodejs_semantic-release.md\":\"B_4_SZrq\",\"react_react实战_设计模式与最佳实践_组件实践（2）：组件的内部实现.md\":\"pvpT0TG5\",\"typescript_tslib如何使用.md\":\"BsoCW_pQ\",\"react_react实战_设计模式与最佳实践_组件实践（3）：组件化样式.md\":\"DGiADrWs\",\"react_css解决方案_index.md\":\"Q7QSPlYi\",\"typescript_tsdx使用.md\":\"Bcl_A70V\",\"css3_现代web布局_17.md\":\"BCxBKcNP\",\"react_react避坑指南_usestate.md\":\"DK9-NLHJ\",\"electron_react中开发踩坑.md\":\"DpZMxt4e\",\"react_react实战_设计模式与最佳实践_react 的未来（2）：suspense 带来的异步操作革命.md\":\"BLMrhryT\",\"guide_两个跨域页面进行跳转传参的终极方案.md\":\"DrhWeMH4\",\"react_react避坑指南_index.md\":\"DSoRNwmH\",\"react_自定义hooks_useinputhistory.md\":\"BzWdP5Ij\",\"react_ahooks_useeventemitter.md\":\"OluScTeX\",\"react_自定义hooks_usedebounce.md\":\"7ESFZNIZ\",\"electron_dll使用.md\":\"CGmPSJLR\",\"css3_现代web布局_19.md\":\"DIVJU0PC\",\"react_react好用的插件_react-fast-marquee.md\":\"ZhOvpApp\",\"guide_markdown语法.md\":\"BiAJoIJO\",\"nodejs_execa执行外部命令.md\":\"x2fLlbix\",\"nodejs_npkill快速查找删除node_modules.md\":\"CCmNiMZ0\",\"react_ahooks_usefullscreen.md\":\"BkgW8e5k\",\"react_自定义hooks_usesetparticalstate.md\":\"BUv_cnmS\",\"standard_css规范.md\":\"DeHg6jnS\",\"electron_数据持久缓存方案_数据持久缓存库lndb.md\":\"DJUK7UVx\",\"react_自定义组件_如何在react应用中建立错误处理层.md\":\"CNGgmToJ\",\"react_react搞定复杂项目状态管理_index.md\":\"BAj7---e\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第09章 深入infer、ts高级类型、泛型再进阶【全方位深度掌握 ts 泛型】.md\":\"C4bu5mph\",\"tools_idea 注释模板配置.md\":\"0gbuJbd6\",\"electron_基于electron-vite构建react桌面客户端.md\":\"DLOPvG7Q\",\"nodejs_release-it.md\":\"DMPaqLXc\",\"react_react实战_设计模式与最佳实践_react 状态管理（3）：mobx 使用模式.md\":\"Bm7xwY_i\",\"react_ahooks_usehistorytravel.md\":\"DiEJa1G5\",\"css3_现代web布局_21.md\":\"D2PeNBzk\",\"css3_现代web布局_11.md\":\"B10tI7m_\",\"react_antd使用踩坑经验汇总_tree组件.md\":\"CHpE5yvc\",\"electron_electron-builder.md\":\"DNL_pnq4\",\"standard_vue规范.md\":\"DyiLpRai\",\"electron_index.md\":\"BRqk3UrY\",\"react_自定义hooks_userouter.md\":\"LSydLgnY\",\"utils_rxjs.md\":\"C9QQC7cC\",\"standard_codereview代码审查.md\":\"vOhADmqT\",\"react_ahooks_userequest函数.md\":\"erWiB1Ub\",\"react_自定义hooks_usedebouncefn.md\":\"CD-kzD_X\",\"linux_linux常用命令.md\":\"D7RSIp22\",\"standard_commitlint.md\":\"Bc6BHMQJ\",\"react_自定义hooks_uselocationlisten.md\":\"lpoaVI0f\",\"standard_组件封装规范.md\":\"0Ow45yWm\",\"react_自定义hooks_useecharts.md\":\"GJwF9MkV\",\"nodejs_bluebird超高性能的promise库.md\":\"DY98ImvT\",\"react_react避坑指南_useref.md\":\"fBjuCQ9O\",\"electron_electron开发实战_electron环境搭建.md\":\"BaHlrXyB\",\"utils_index.md\":\"mk7T0j55\",\"react_自定义hooks_useevent.md\":\"Comn2-Er\",\"typescript_index.md\":\"Dcw9VPNE\",\"standard_git分支开发规范.md\":\"BIXsyTAc\",\"electron_三方库.md\":\"CAt92F-s\",\"react_react组件库搭建指南_01项目初始化.md\":\"hYE7GWll\",\"react_react好用的插件_jsbarcode.md\":\"CBTRcUAR\",\"electron_electron-react-boilerplate.md\":\"BzWSbABc\",\"react_自定义hooks_usemodal.md\":\"B_XFkn0G\",\"standard_editorconfig.md\":\"D8UrOG7b\",\"tools_git基本使用.md\":\"BvP_0S5g\",\"react_react避坑指南_闭包陷阱.md\":\"zChJGfX2\",\"standard_prettierrc.md\":\"BdHhuL9t\",\"standard_babelrc.md\":\"DxUrlX2l\",\"standard_eslint规范.md\":\"Mu3t4FWn\",\"react_react实战_设计模式与最佳实践_react 状态管理（4）：不同方式对比.md\":\"C3iD1iFV\",\"react_antd使用踩坑经验汇总_index.md\":\"DDsanD1T\",\"tools_yalc本地调试组件库方案.md\":\"BQ3H5AQN\",\"standard_json格式规范.md\":\"B3NuLvz_\",\"electron_配置讲解.md\":\"Bz4ASaED\",\"nodejs_index.md\":\"D6qsbk0v\",\"standard_node_cjs和esm混合开发.md\":\"DedlYZ1u\",\"css3_现代web布局_25.md\":\"DZBc6jqi\",\"standard_stylelint.md\":\"zaLGDP6-\",\"react_自定义hooks_useformmodal.md\":\"DRclMTXI\",\"standard_开源证书.md\":\"CNa1gXoD\",\"react_antd使用踩坑经验汇总_其他弹出层.md\":\"CYvGLZdo\",\"utils_baseinputnumber.md\":\"CCJr66pT\",\"guide_installation.md\":\"Cyna48DO\",\"utils_lodash.md\":\"B_LD-ulc\",\"standard_react规范.md\":\"BDzywc_U\",\"standard_sytlelint.md\":\"BHAGjA08\",\"tools_readme.md自动生成目录.md\":\"Doh9u-Eg\",\"react_自定义hooks_usememo.md\":\"CZgD0tn_\",\"standard_gitignore.md\":\"DGdE7Xq3\",\"react_react避坑指南_useeffect.md\":\"BNAb8N04\",\"nodejs_pkg打包node程序.md\":\"C_mVgg8Y\",\"standard_husky.md\":\"DWpB1fyF\",\"utils_calcutils.md\":\"QyONwp33\",\"tools_index.md\":\"CrRsxT5W\",\"standard_index.md\":\"zy5tYKLI\",\"react_自定义hooks_usemethods.md\":\"CLURCU9f\",\"react_自定义hooks_useloadscript.md\":\"CYcWRvSo\",\"tools_google快捷键.md\":\"mD76rDlK\",\"standard_package.json.md\":\"jsOo3MDQ\",\"standard_前端开发最佳实践总结.md\":\"BGrFiLKW\",\"react_自定义hooks_usesafestate.md\":\"m62ZMP2_\",\"standard_prettierignore.md\":\"VM68Ff5l\",\"react_react实战_设计模式与最佳实践_react 状态管理（2）：redux 使用模式.md\":\"CA0pcV96\",\"utils_mitt.md\":\"DG7F8qQl\",\"standard_gitlab.yml.md\":\"lN9PqoBe\",\"nodejs_minimist命令行参数解析.md\":\"Dx4gEgi2\",\"standard_命名规范.md\":\"DWUPIS4I\",\"react_自定义hooks_usepersistcallback.md\":\"FHXVMyDJ\",\"tools_windows终端优化.md\":\"DANvAyOj\",\"electron_ssl证书.md\":\"Q1dQBluF\",\"react_自定义组件_lazyload.md\":\"B9Bn4iLf\",\"react_自定义组件_keepalive.md\":\"YY9acXG_\",\"tools_常用node库.md\":\"DTeGhNPp\",\"standard_lint-staged.md\":\"DidcSpvQ\",\"css3_现代web布局_20.md\":\"DVP5FwHt\",\"guide_数字相关知识.md\":\"BRzTdbnI\",\"standard_圈复杂度.md\":\"B-UtHNKH\",\"tools_windows快捷键.md\":\"BFgiqO74\",\"standard_ts规范.md\":\"CiDbO0cg\",\"react_antd使用踩坑经验汇总_form表单.md\":\"DGT8jzsZ\",\"react_状态管理_zustand.md\":\"CQAFP37K\",\"react_react好用的插件_react-hook-form.md\":\"BsJSOnXN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"龙陌的博客\",\"description\":\"基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！\",\"base\":\"/long-press/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.ico\",\"nav\":[{\"text\":\"💻 首页\",\"link\":\"/\"},{\"text\":\"💡 指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"🔧 编程工具\",\"link\":\"/tools/\"},{\"text\":\"🔧 常用工具类\",\"link\":\"/utils/\"},{\"text\":\"📋 前端规范\",\"link\":\"/standard/\"},{\"text\":\"⭐ React\",\"link\":\"/react/React实战,设计模式与最佳实践/\"},{\"text\":\"⭐ TypeScript\",\"link\":\"/typescript/\"},{\"text\":\"⭐ Css3\",\"link\":\"/css3/\"},{\"text\":\"⭐ Electron\",\"link\":\"/electron/\"},{\"text\":\"⭐ Linux\",\"link\":\"/linux/linux常用命令\",\"activeMatch\":\"/linux/\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://vitepress.vuejs.org/guide/getting-started\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/248956095\"}],\"footer\":{\"copyright\":\"Copyright © 2024-present Longmo\"},\"sidebar\":{\"/\":[{\"text\":\"开始阅读\",\"collapsed\":false,\"items\":[{\"text\":\"阅读须知\",\"link\":\"/guide\"}]}],\"/tools/\":[{\"collapsed\":false,\"items\":[{\"text\":\"GitHub常用技巧\",\"link\":\"\\\\tools\\\\GitHub常用技巧.md\"},{\"text\":\"Google快捷键\",\"link\":\"\\\\tools\\\\Google快捷键.md\"},{\"text\":\"README.md自动生成目录\",\"link\":\"\\\\tools\\\\README.md自动生成目录.md\"},{\"text\":\"Rollup打包\",\"link\":\"\\\\tools\\\\Rollup打包.md\"},{\"text\":\"Runjs\",\"link\":\"\\\\tools\\\\Runjs.md\"},{\"text\":\"Vscode使用教程\",\"link\":\"\\\\tools\\\\Vscode使用教程.md\"},{\"text\":\"WebStorm快捷键\",\"link\":\"\\\\tools\\\\WebStorm快捷键.md\"},{\"text\":\"Windows快捷键\",\"link\":\"\\\\tools\\\\Windows快捷键.md\"},{\"text\":\"Windows测试IP端口\",\"link\":\"\\\\tools\\\\Windows测试IP端口.md\"},{\"text\":\"Windows终端优化\",\"link\":\"\\\\tools\\\\Windows终端优化.md\"},{\"text\":\"Yalc本地调试组件库方案\",\"link\":\"\\\\tools\\\\Yalc本地调试组件库方案.md\"},{\"text\":\"git基本使用\",\"link\":\"\\\\tools\\\\git基本使用.md\"},{\"text\":\"idea 注释模板配置\",\"link\":\"\\\\tools\\\\idea 注释模板配置.md\"},{\"text\":\"node各类命令\",\"link\":\"\\\\tools\\\\node各类命令.md\"},{\"text\":\"npm镜像源管理工具\",\"link\":\"\\\\tools\\\\npm镜像源管理工具.md\"},{\"text\":\"pnpm多包项目\",\"link\":\"\\\\tools\\\\pnpm多包项目.md\"},{\"text\":\"workspaces核心特性总结\",\"link\":\"\\\\tools\\\\workspaces核心特性总结.md\"},{\"text\":\"依赖镜像地址\",\"link\":\"\\\\tools\\\\依赖镜像地址.md\"},{\"text\":\"常用node库\",\"link\":\"\\\\tools\\\\常用node库.md\"},{\"text\":\"常用命令\",\"link\":\"\\\\tools\\\\常用命令.md\"},{\"text\":\"自动版本管理和生成CHANGELOG\",\"link\":\"\\\\tools\\\\自动版本管理和生成CHANGELOG.md\"},{\"text\":\"规范GIT代码提交信息\",\"link\":\"\\\\tools\\\\规范GIT代码提交信息.md\"},{\"text\":\"资源导航\",\"link\":\"\\\\tools\\\\资源导航.md\"}]}],\"/standard/\":[{\"collapsed\":false,\"items\":[{\"text\":\"CodeReview代码审查\",\"link\":\"\\\\standard\\\\CodeReview代码审查.md\"},{\"text\":\"Css规范\",\"link\":\"\\\\standard\\\\Css规范.md\"},{\"text\":\"Git分支开发规范\",\"link\":\"\\\\standard\\\\Git分支开发规范.md\"},{\"text\":\"Node_CJS和ESM混合开发\",\"link\":\"\\\\standard\\\\Node_CJS和ESM混合开发.md\"},{\"text\":\"React规范\",\"link\":\"\\\\standard\\\\React规范.md\"},{\"text\":\"babelrc\",\"link\":\"\\\\standard\\\\babelrc.md\"},{\"text\":\"commitlint\",\"link\":\"\\\\standard\\\\commitlint.md\"},{\"text\":\"editorconfig\",\"link\":\"\\\\standard\\\\editorconfig.md\"},{\"text\":\"eslint规范\",\"link\":\"\\\\standard\\\\eslint规范.md\"},{\"text\":\"fatherrc.ts配置文件\",\"link\":\"\\\\standard\\\\fatherrc.ts配置文件.md\"},{\"text\":\"gitignore\",\"link\":\"\\\\standard\\\\gitignore.md\"},{\"text\":\"gitlab.yml\",\"link\":\"\\\\standard\\\\gitlab.yml.md\"},{\"text\":\"git提交规范\",\"link\":\"\\\\standard\\\\git提交规范.md\"},{\"text\":\"husky\",\"link\":\"\\\\standard\\\\husky.md\"},{\"text\":\"json格式规范\",\"link\":\"\\\\standard\\\\json格式规范.md\"},{\"text\":\"lint-staged\",\"link\":\"\\\\standard\\\\lint-staged.md\"},{\"text\":\"package.json\",\"link\":\"\\\\standard\\\\package.json.md\"},{\"text\":\"prettier\",\"link\":\"\\\\standard\\\\prettier.md\"},{\"text\":\"prettierignore\",\"link\":\"\\\\standard\\\\prettierignore.md\"},{\"text\":\"prettierrc\",\"link\":\"\\\\standard\\\\prettierrc.md\"},{\"text\":\"pretty-quick\",\"link\":\"\\\\standard\\\\pretty-quick.md\"},{\"text\":\"stylelint\",\"link\":\"\\\\standard\\\\stylelint.md\"},{\"text\":\"sytlelint\",\"link\":\"\\\\standard\\\\sytlelint.md\"},{\"text\":\"tsconfig.json\",\"link\":\"\\\\standard\\\\tsconfig.json.md\"},{\"text\":\"ts规范\",\"link\":\"\\\\standard\\\\ts规范.md\"},{\"text\":\"typings.d.ts\",\"link\":\"\\\\standard\\\\typings.d.ts.md\"},{\"text\":\"vue规范\",\"link\":\"\\\\standard\\\\vue规范.md\"},{\"text\":\"前端开发最佳实践总结\",\"link\":\"\\\\standard\\\\前端开发最佳实践总结.md\"},{\"text\":\"命名规范\",\"link\":\"\\\\standard\\\\命名规范.md\"},{\"text\":\"圈复杂度\",\"link\":\"\\\\standard\\\\圈复杂度.md\"},{\"text\":\"开源证书\",\"link\":\"\\\\standard\\\\开源证书.md\"},{\"text\":\"组件封装规范\",\"link\":\"\\\\standard\\\\组件封装规范.md\"}]}],\"/aHooks/\":[],\"/utils/\":[{\"collapsed\":false,\"items\":[{\"text\":\"BaseInputNumber\",\"link\":\"\\\\utils\\\\BaseInputNumber.md\"},{\"text\":\"calcUtils\",\"link\":\"\\\\utils\\\\calcUtils.md\"},{\"text\":\"lodash\",\"link\":\"\\\\utils\\\\lodash.md\"},{\"text\":\"mitt\",\"link\":\"\\\\utils\\\\mitt.md\"},{\"text\":\"rxjs\",\"link\":\"\\\\utils\\\\rxjs.md\"}]}],\"/guide/\":[{\"text\":\"基础\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"},{\"text\":\"Markdown语法\",\"link\":\"/guide/Markdown语法\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"打包指南\",\"link\":\"/guide/打包指南\"}]}],\"/react/\":{\"base\":\"/react/\",\"items\":[{\"text\":\"React基础\",\"base\":\"/react/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"},{\"text\":\"React Hooks\",\"link\":\"React Hooks\"},{\"text\":\"ReactRouter\",\"link\":\"ReactRouter\"}]},{\"text\":\"Antd使用踩坑经验汇总\",\"base\":\"/react/Antd使用踩坑经验汇总/\",\"items\":[{\"text\":\"Form表单\",\"link\":\"Form表单\"},{\"text\":\"AntdTable表格\",\"link\":\"AntdTable表格\"},{\"text\":\"Tree树组件\",\"link\":\"Tree组件\"},{\"text\":\"其他弹出层\",\"link\":\"其他弹出层\"},{\"text\":\"Tabs选项卡\",\"link\":\"Tabs选项卡\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"}]},{\"text\":\"CSS解决方案\",\"base\":\"/react/CSS解决方案/\",\"items\":[{\"text\":\"CSS Module\",\"link\":\"CSS_Module\"}]},{\"text\":\"ahooks\",\"link\":\"/aHooks/\"},{\"text\":\"自定义Hooks\",\"base\":\"/react/自定义Hooks/\",\"items\":[{\"text\":\"useRouter\",\"link\":\"useRouter\"},{\"text\":\"useLoadScript\",\"link\":\"useLoadScript\"},{\"text\":\"useInputHistory\",\"link\":\"useInputHistory\"},{\"text\":\"useSetParticalState\",\"link\":\"useSetParticalState\"},{\"text\":\"useFormModal\",\"link\":\"useFormModal\"},{\"text\":\"useCopy\",\"link\":\"useCopy\"},{\"text\":\"useIntersection\",\"link\":\"useIntersection\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useInterval\",\"link\":\"useInterval\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useModal\",\"link\":\"useModal\"}]},{\"text\":\"React实战：设计模式和最佳实践\",\"base\":\"/react/React实战,设计模式与最佳实践/\",\"collapsed\":true,\"items\":[{\"text\":\"React的设计思想\",\"link\":\"React的设计思想\"},{\"text\":\"组件实践（1）：如何定义清晰可维护的接口\",\"link\":\"组件实践（1）：如何定义清晰可维护的接口\"},{\"text\":\"组件实践（2）：组件的内部实现\",\"link\":\"组件实践（2）：组件的内部实现\"},{\"text\":\"组件实践（3）：组件化样式\",\"link\":\"组件实践（3）：组件化样式\"},{\"text\":\"组件设计模式（1）：聪明组件和傻瓜组件\",\"link\":\"组件设计模式（1）：聪明组件和傻瓜组件\"},{\"text\":\"组件设计模式（2）：高阶组件\",\"link\":\"组件设计模式（2）：高阶组件\"},{\"text\":\"组件设计模式（3）：render props 模式\",\"link\":\"组件设计模式（3）：render props 模式\"},{\"text\":\"组件设计模式（4）：提供者模式\",\"link\":\"组件设计模式（4）：提供者模式\"},{\"text\":\"组件设计模式（5）：组合组件\",\"link\":\"组件设计模式（5）：组合组件\"},{\"text\":\"React 单元测试\",\"link\":\"React 单元测试\"},{\"text\":\"React 状态管理（1）：组件状态\",\"link\":\"React 状态管理（1）：组件状态\"},{\"text\":\"React 状态管理（2）：Redux 使用模式\",\"link\":\"React 状态管理（2）：Redux 使用模式\"},{\"text\":\"React 状态管理（3）：Mobx 使用模式\",\"link\":\"React 状态管理（3）：Mobx 使用模式\"},{\"text\":\"React 状态管理（4）：不同方式对比\",\"link\":\"React 状态管理（4）：不同方式对比\"},{\"text\":\"路由的魔法：React Router\",\"link\":\"路由的魔法：React Router\"},{\"text\":\"服务器端渲染（1）：基本套路\",\"link\":\"服务器端渲染（1）：基本套路\"},{\"text\":\"服务器端渲染（2):理解Nextjs\",\"link\":\"服务器端渲染（2）理解NextJS\"},{\"text\":\"React 的未来（1）： 拥抱异步渲染\",\"link\":\"React 的未来（1）： 拥抱异步渲染\"},{\"text\":\"React 的未来（2）：Suspense 带来的异步操作革命\",\"link\":\"React 的未来（2）：Suspense 带来的异步操作革命\"},{\"text\":\"React 的未来（3）：函数化的 Hooks\",\"link\":\"React 的未来（3）：函数化的 Hooks\"}]},{\"text\":\"React搞定复杂项目状态管理\",\"base\":\"/react/React搞定复杂项目状态管理/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React后台管理系统项目实战\",\"base\":\"/react/React后台管理系统项目实战/\",\"collapsed\":false,\"items\":[]},{\"text\":\"慕课网最新React技术栈，实战复杂低代码项目-仿问卷星\",\"base\":\"/react/慕课网最新React技术栈，实战复杂低代码项目-仿问卷星/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React状态管理\",\"base\":\"/react/状态管理/\",\"collapsed\":false,\"items\":[{\"text\":\"zustand\",\"link\":\"zustand\"},{\"text\":\"zustand翻译文档\",\"link\":\"zustand翻译文档\"}]},{\"text\":\"开发一个组件库\",\"base\":\"/react/开发一个组件库/\",\"items\":[{\"text\":\"如何完善组件单测\",\"link\":\"如何完善组件单测\"},{\"text\":\"handlebars模板\",\"link\":\"handlebars模板\"}]},{\"text\":\"React好用的插件\",\"base\":\"/react/React好用的插件/\",\"items\":[{\"text\":\"js-pinyin\",\"link\":\"js-pinyin\"},{\"text\":\"jsbarcode\",\"link\":\"jsbarcode\"},{\"text\":\"react-jsx-parse\",\"link\":\"react-jsx-parse\"},{\"text\":\"react-load-script\",\"link\":\"react-load-script\"},{\"text\":\"react-to-print\",\"link\":\"react-to-print\"},{\"text\":\"react-viewer\",\"link\":\"react-viewer\"},{\"text\":\"react-hook-form\",\"link\":\"react-hook-form\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"}]}]},\"/typescript/\":{\"base\":\"/typescript/\",\"items\":[{\"text\":\"TypeScript\",\"base\":\"/typescript/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"}]},{\"text\":\"TS 从入门到深度掌握，晋级TypeScript高手实战课程\",\"base\":\"/typescript/TS 从入门到深度掌握，晋级TypeScript高手实战课程/\",\"collapsed\":false,\"items\":[{\"text\":\"第10章TS声明文件，TS模块.md\",\"link\":\"第10章TS声明文件，TS模块\"}]},{\"text\":\"晋级TypeScript高手，成为抢手的前端开发人才\",\"base\":\"/typescript/晋级TypeScript高手，成为抢手的前端开发人才/\",\"collapsed\":false,\"items\":[{\"text\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\",\"link\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"},{\"text\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\",\"link\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"}]}]},\"/css3/\":{\"base\":\"/css3/\",\"items\":[{\"text\":\"现代web布局\",\"base\":\"/css3/现代web布局/\",\"collapsed\":false,\"items\":[{\"text\":\"Web 布局技术演进：了解 Web 布局发展史\",\"link\":\"01\"},{\"text\":\"现代 Web 布局技术术语\",\"link\":\"02\"},{\"text\":\"Flexbox 布局基础使用\",\"link\":\"03\"},{\"text\":\"Flexbox 布局中的对齐方式\",\"link\":\"04\"},{\"text\":\"Flexbox 布局中的 flex 属性的基础运用\",\"link\":\"05\"},{\"text\":\"Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目\",\"link\":\"06\"},{\"text\":\"Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目\",\"link\":\"07\"},{\"text\":\"Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？\",\"link\":\"08\"},{\"text\":\"使用 Flexbox 构建经典布局：10 种经典 Web 布局\",\"link\":\"09\"},{\"text\":\"10\",\"link\":\"10\"}]},{\"text\":\"postcss\",\"base\":\"/css3/postcss/\",\"collapsed\":false,\"items\":[{\"text\":\"postcss-prefix-selector增加统一作用域\",\"link\":\"postcss-prefix-selector增加统一作用域\"}]}]},\"/electron/\":{\"base\":\"/electron/\",\"items\":[{\"text\":\"electron开发实战\",\"base\":\"/electron/electron开发实战/\",\"collapsed\":false,\"items\":[{\"text\":\"Electron 环境搭建+前期准备\",\"link\":\"electron环境搭建\"},{\"text\":\"开发一个简单版的番茄钟\",\"link\":\"开发一个简单版的番茄钟\"},{\"text\":\"APP特性\",\"link\":\"App特性\"},{\"text\":\"原生GUI\",\"link\":\"原生GUI\"},{\"text\":\"使用NodeJs调用原生模块\",\"link\":\"使用NodeJs调用原生模块\"},{\"text\":\"释放前端想象力\",\"link\":\"释放前端想象力\"},{\"text\":\"Electron优化白屏\",\"link\":\"electron优化白屏\"},{\"text\":\"Electron应用打包\",\"link\":\"electron应用打包\"}]},{\"text\":\"Electron数据持久化方案\",\"base\":\"/electron/数据持久化方案/\",\"collapsed\":false,\"items\":[{\"text\":\"electron-store\",\"link\":\"electron-store\"},{\"text\":\"数据持久缓存库lndb\",\"link\":\"数据持久缓存库lndb\"}]},{\"text\":\"react中开发踩坑\",\"link\":\"/electron/react中开发踩坑\"}]}},\"outline\":{\"level\":[2,6],\"label\":\"本页目录\"},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"lastUpdated\":{\"text\":\"上次更新\"},\"returnToTopLabel\":\"返回顶部\",\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"归档\",\"editLink\":{\"pattern\":\"https://github.com/xxx\",\"text\":\"在 github 上编辑此页\"},\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
    
  </body>
</html>